Angular 嵌套表单

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]]
  })
])