1.假设我有一个 “添加用户“ 的需求,在用户的信息中,联系方式分为邮箱和手机号,这两个联系方式就可以作为一个嵌套的内部的表单。下面是实现方式:
<form [formGroup]="userForm">
<input type="text" formControlName = "name">
<div formGroupName="contact"><input type="text" formControlName = "email"><input type="text" formControlName = "mobile">
<div>
<button (click)="form.reset()">Reset</button>
</form>const nameControl = new FormControl(' ', [Validators.required]);
this.userForm = new FormGroup([name:nameControl,contact: new FormGroup([{email: new FormControl(' ', [Validators.required]),mobile: new FormControl(' ', [Validators.required]);
}])
])
2.目前创建表单字段每次都需要new FormGroup,我们可以优化一下使用FormBuilder。如下:
constructor(private fb:FormBuilder)
this.userForm = this.fb.group({name:[' ', [Validators.required]],this.fb.group({email: [' ', [Validators.required]],mobile: [' ', [Validators.required]]})
])