我正在处理大型表单,因此我计划将表单截断为多个子组件,这有助于轻松集成和维护.使用表单生成器我试图实现这一点.
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>
Run Code Online (Sandbox Code Playgroud)
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;
}
}
Run Code Online (Sandbox Code Playgroud)
CONSOLE.LOG
formControlName must be used with a parent formGroup directive. You'll want to …Run Code Online (Sandbox Code Playgroud)