Angular学习笔记42：响应式表单：表单分组FormGroup-新建、获取FormGroup的值

继Angular学习笔记40以后。
在user-info这个组件中，有三个formControl,但是会发现在这个组件中，三个控件分别绑定了三个组件的属性值。能否在一个属性中，将这三个formControl分组管理起来呢？

新建一个FormGroup

在Angular 中，可以使用FormGroup；通过 FormGroup 将这三个控件管理起来,并且通过FormGroup就可以将之前的三个属性变成一个属性。

• 现在新建一个FormGroup ，并将之前的三个属性置换成FormGroup的三个实例。

validateForm = new FormGroup({
   
    name: new FormControl(null, [Validators.required]),
    age: new FormControl(null, [Validators.required]),
    email: new FormControl(null, [Validators.required]),
  });

将这个 FormGroup 和form标签中的FormGroup属性绑定起来。

<form [formGroup]="validateForm"></form>

将之前的三个fromControl管理起来。

<form [formGroup]="validateForm">
    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>
        姓名
      </nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" placeholder="请输入姓名~" formControlName="name">
      </nz-form-control>
    </nz-form-item>

    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>
        年龄
      </nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" placeholder="请输入年龄~" formControlName="age">
      </nz-form-control>
    </nz-form-item>