Angular：嵌套表单的验证

嵌套表单

ngOnInit()中的表单验证

以下文代码为例，表单validateForm中包含三个子表单，每个表单中有一定的字段值，初始化表单验证：

ngOnInit() {
    this.validateForm = this.fb.group({
      bizMeruser: this.fb.group({                                  // 登录信息
        username: ['', [Validators.required]],                     // 管理登录账号
      }),
      bizMerchantBasic: this.fb.group({                            // 商户/公司基础信息
        merchantFullName: ['', [Validators.required, Validators.maxLength(32)]],             // 全称
        merchantShortName: ['', [Validators.required, Validators.maxLength(32)]],            // 简称
        ........
     }),
      bizMerchantFreight: this.fb.group({                  // 供应商运费
        merchantFreight: ['', [Validators.required, Validators.maxLength(32)]],      // 运费信息
       ........
      })
    });
    /* 加载页面字段值 */
    if (!this.isAdd) {                                    // 查看或修改页面
      this.commercialProvider.getDataById(this.id).subscribe(res => {
        this.initFormData(res);
      });
    } else {
      this.isSpinning = false;
    }
  }

从上面的表单结构可以看出来，嵌套表单的原理很简单，也就是把子表单作为父表单的一个元素而已，初始化用下面的格式即可：
父表单名= this.fb.group({
子表单名1: this.fb.group({
…
}),
子表单名2: this.fb.group({
…
}),
})

初始化表单的方法

 /**
   * 初始化form
   * @param data
   */
  initFormData(data) {
    this.validateForm.controls['bizMeruser'].setValue({
      username: _.get(data.bizMeruser, 'username', '')
    });
    this.validateForm.controls['bizMerchantBasic'].setValue({
      merchantFullName: _.get(data.bizMerchantBasic, 'merchantFullName', ''),
      merchantShortName: _.get(data.bizMerchantBasic, 'merchantShortName', ''),
      .......
    });
    this.validateForm.controls['bizMerchantFreight'].setValue({
      merchantFreight: _.get(data.bizMerchantFreight, 'merchantFreight', ''),
      .......
    });
    this.isSpinning = false;
  }

使用 _.get(data.子表单名, ‘子表单中字段名’, ‘’) 从后端返回的data中取出每个表单中的字段，在页面上显示出来

表单验证的方法

getFormGroupControl(group, name) {
    return this.validateForm.get(group).get(name);
  }

保存方法中怎么取到每个字段

嵌套表单的取字段的思路就是先遍历表单，再遍历每个表单内部的字段：

doSave(event, value) {
    event.preventDefault();
    const controls = this.validateForm.controls;
    for (const key in controls) {
      if (controls.hasOwnProperty(key)) {
        const group = this.validateForm.get(key) as FormGroup;
        const items = group.controls;
        for (const key2 in items) {             // 先遍历表单，再遍历每个表单内部的字段
          if (items.hasOwnProperty(key2)) {
            group.controls[key2].markAsDirty();
            group.controls[key2].updateValueAndValidity();
          }
        }
      }
    }
    if (!this.validateForm.invalid) {
      console.log('取到字段了！');
             .........
     } else {
       console.log('没有取到字段');
     }

页面中表单的写法

 <form [formGroup]="validateForm">
          <!-- 三个form放在validation中一起验证 -->

          <div formGroupName="bizMeruser">
            <!-- 第一张表 -->
                   <!-- 登录信息-->
            <nz-card nzTitle="登录信息">
              <div nz-row>
                <!-- 登录账号:审批不通过的用户除登录账号外其他均可修改 -->
                <div nz-col [nzSpan]="10">
                  <nz-form-item nzFlex>
                    <nz-form-label nz-col [nzRequired]="!isReadOnly" [nzSpan]="6" nzFor="username">管理登录账号</nz-form-label>
                    <nz-form-control nz-col [nzSpan]="14">
                      <input nz-input formControlName="username" readonly="readonly">
                    </nz-form-control>
                  </nz-form-item>
                </div>
              </div>
            </nz-card>
          </div>
     </div>
     <!-- 第二张表 -->
     .........
     <!-- 第三张表 -->
     .........
     </form>

效果