Componente filho múltiplo dentro do formulário - Angular 2
Estou trabalhando em grande formato, por isso pretendo truncar o formulário em vários componentes filhos, o que ajuda a facilitar a integração e a manutenção. Usando o construtor de formulários, estou tentando implementar isso.
mainform.html
<form novalidate (ngSubmit)="onSubmit(formDetail);" [formGroup]="formDetail">
<label>
<span>Name</span>
<input
type="text"
placeholder="Enter emp name"
formControlName="name">
</label>
<app-userinfo></app-userinfo> <!-- Child component 1 -->
<app-useracc></app-useracc> <!-- Child component 2 -->
</form>
mainform.ts
export class MainformComponent implements OnInit {
formDetail: FormGroup;
constructor(private formBuilder: FormBuilder) { }
ngOnInit() {
this.formDetail= this.formBuilder.group({
name:'',
userinfo: this.formBuilder.group({
userid: '',
userph: ''
}),
useracc: this.formBuilder.group({
useracc: '',
usertransfer: ''
})
});
}
onSubmit(value:User){
debugger;
}
}
Console.log
formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
É possível aninhar o componente do formulário como um filho separado?