Angular学习笔记43：响应式表单：FormGroup嵌套

继Angular学习笔记42：响应式表单：表单分组FormGroup-新建、获取FormGroup的值以后。
在UserInfo中还有属性是 Address，不过这个 Address属性 是由三个控件组成，分别是：area:地区；street:街道；houseId:门牌号。
这个时候，就涉及到了FormGroup嵌套。

将area:地区；street:街道；houseId:门牌号这三个进行分组，它们将是一个新的FormGroup，但是，这个FormGroup和之前一些FormControl是属于同一个表单中的。所以就要将这个Address嵌套到之前的ValidateFrom中。

修改类文件：

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

修改模板文件：

<nz-divider [nzText]="'响应式表单'"></nz-divider>
<nz-content>
  <form [formGroup]="validateForm" (ngSubmit)="handleSubmit()">
    <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>

    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>
        Email
      </nz-form-label>
      <nz-form-control nzSpan="6" nz-col>
        <input nz-input type="text" placeholder="请输入Email~" formControlName="email">
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label nzSpan="3" nz-col>address</nz-form-label>
      <nz-form-control formGroupName="address" nzSpan="18" nz-col>
        <nz-row>
          <nz-form-control nzSpan="8" nz-col>
            <input nz-input formControlName="area" placeholder="请输入地区">
          </nz-form-control>

          <nz-form-control nzSpan="8" nz-col>
            <input nz-input formControlName="street" placeholder="请输入街道">
          </nz-form-control>

          <nz-form-control nzSpan="8" nz-col>
            <input nz-input formControlName="houseId" placeholder="请输入门牌号">
          </nz-form-control>
        </nz-row>

      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <button type="submit" nz-button [disabled]="validateForm.invalid">提交表单</button>
    </nz-form-item>
  </form>

</nz-content>

<nz-content>
  <nz-form-item>
    <nz-form-label nzSpan="3" nz-col>
      展示表单的值
    </nz-form-label>
    <nz-form-control nzSpan="6" nz-col>
      {{validateForm.value | json }}
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control nzOffset="3" nzSpan="6">
      <button nz-button (click)="handleInitForm()">重置</button>
    </nz-form-control>
  </nz-form-item>
</nz-content>

保存运行：就会发现之前的validateForm中增加了一个属性：address，不过这个属性不再是单纯的null，而是一个新的object，里面有area:地区；street:街道；houseId:门牌号，三个属性。