Angular+NG-ZORRO From表单 数组表单

1、form表单中包含普通参数，也包含数组参数

// form 表单配置
 this.validateForm = this.fb.group({
      name: [null, [Validators.required]], // 名称
      id: [null], // 
      address: [null, [Validators.required]], // 地址
      linkmanName: [null, [Validators.required]], // 姓名
      linkmanTel: [ null,[Validators.required]], // 电话
      accountInfo: new FormArray([]), // 数组
 });

 this.addAccountInfo(); // 初始化数组


addAccountInfo() {

    const myContact: FormGroup = new FormGroup({
        account: new FormControl({value: null, disabled: false},[Validators.required]),
        address: new FormControl({value: null, disabled: false},[Validators.required])
    })
    // 添加数组元素
    this.accountInfo.push(myContact);
}

get accountInfo() {
  return this.validateForm.get('accountInfo') as FormArray;
}

  // 删除信息
  removeContact(i: number) {
    this.accountInfo.removeAt(i);
  }


// 编辑时数组数据回显
result.accountInfo.forEach((item: any) =>{
    this.addContact();
})
this.validateForm.setValue(result);
this.changeDetectorRef.detectChanges();
// tslint:disable-next-line:forin
for (const i in this.validateForm.controls) {
   this.validateForm.controls[i].markAsDirty();
   this.validateForm.controls[i].updateValueAndValidity();
}

2、html绘制表单数组

<div formArrayName="accountInfo">
          <div  class="form-array-box" *ngFor="let contact of accountInfo.controls; let i = index"
          [formGroupName]="i">
            <div class="form-array-info">
              <nz-form-item class="marbt_10 padd_10">
                <nz-form-label [nzSpan]="6" [nzRequired]="nzRequired" nzFor="account">帐号</nz-form-label>
                <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="帐号不能为空" *ngIf="type !== 'info'">
                  <input
                    type="text"
                    class="form-control"
                    nz-input
                    placeholder="请输入账号"
                    formControlName="account"
                    maxlength="25"
                  />
                  <nz-form-explain
                    *ngIf="contact.get('account')?.dirty && contact.get('account')?.errors"
                  >
                    请输入正确的账号!
                  </nz-form-explain>
                </nz-form-control>
                <nz-form-control [nzSpan]="16" nzHasFeedback *ngIf="type === 'info'">
                  <span class="info-text">{{ validateForm.value.accountInfo[i].account }}</span>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item class="marbt_20">
                <nz-form-label [nzSpan]="6" [nzRequired]="nzRequired" nzFor="bank">地址</nz-form-label>
                <nz-form-control [nzSpan]="16" nzHasFeedback nzErrorTip="地址不能为空" *ngIf="type !== 'info'">
                  <input
                    type="text"
                    class="form-control"
                    nz-input
                    placeholder="请输入地址"
                    formControlName="address"
                    maxlength="20"
                  />
                  <nz-form-explain *ngIf="contact.get('address')?.dirty && contact.get('address')?.errors">
                    请输入正确的地址!
                  </nz-form-explain>
                </nz-form-control>
                <nz-form-control [nzSpan]="16" nzHasFeedback *ngIf="type === 'info'">
                  <span class="info-text">{{  validateForm.value.accountInfo[i].address }}</span>
                </nz-form-control>
              </nz-form-item>
            </div>
            <div class="delete-icon" *ngIf="type !== 'info' && accountInfo.length !== 1" (click)="removeContact(i)">
              <i nz-icon nzType="minus-circle" nzTheme="outline"></i>
            </div>
          </div>
          <div style="width: 100%;" *ngIf="type !== 'info' && accountInfo.length < 3">
            <button type="button" class="add-contact-btn btn" (click)="addContact()">
              <i nz-icon nzType="plus-circle" nzTheme="outline"></i>
              添加账户
            </button>
          </div>
        </div>