angular表單的三大基本構(gòu)造塊
1.FormControl：?jiǎn)蝹€(gè)獨(dú)立的表單控件；
2.FormGroup：一組FormControl實(shí)例；
3.FormArray：控件數(shù)組，控件可為FormControl、FormGroup、FormArray的實(shí)例；

FormBuilder： 根據(jù)用戶指定的配置創(chuàng)建 abstractControl，FormBuilder 提供的語(yǔ)法糖可快速實(shí)例化 FormControl、FormGroup、FormArray。

• this.formBuilder.control() ;
• this.formBuilder.group();
• this.formBuilder.array()

FormArray 的使用場(chǎng)景：需要循環(huán)遍歷的表格，實(shí)現(xiàn)動(dòng)態(tài)增加或刪除表數(shù)據(jù)
常用方法：

• at($index); 獲取數(shù)組中位于index處的控件
• push(); 數(shù)組末尾插入新的控件
• removeAt($index) ; 移除數(shù)組中位于index處的控件
• patchValue(); 賦值

DEMO1

this.userModel = this.formBuilder.group({
  name: ['', Validator.compose(...)],
  detailInfoModel: ['', this.formBuilder.array([this.initDetailInfo()])]，
})

// 初始化FormArray detailInfo
initDetailInfoModel() {
  return this.formBuilder.group({
      phone: [''],
      salary: [0],
      extraMony: [0],
      TotalCount: []
  })
}

get detailInfoModel() {
    return this.userModel.get('detailInfoModel') as FormArray;
}

// 將獲取的詳情數(shù)據(jù)循環(huán)賦給表單組detailInfoModel
this.detailInfo = [{phone: 11, salary:11,...},{...}];
this.detailInfo.map((item,index) => {
    this.detailInfoModel.at(index).patchValue({
       phone: item.phone,
       salary: Number(item.salary),
       extraMony: Number(item.extraMony),
       TotalCount: item.TotalCount
  })
})

html表格中如果有合計(jì)需要?jiǎng)討B(tài)計(jì)算，可在合計(jì)中使用ngModel綁定需要累加的控件值

<form [formGroup]="userModel">
<table>
          <thead>
              <tr>
                  <th>電話</th>
                  <th>薪水</th>
                  <th>額外薪水</th>
                  <th>合計(jì)</th>
              </tr>
          </thead>
          <tbody formArrayName="detailInfoModel">
            <ng-container *ngFor="let item of userModel.get('detailInfoModel').controls as FormArray; let i = index" [formGroupName]="i">
                <tr>
                  <td><input type="text" class="form-control" formControlName="phone"></td>
                  <td><input type="number" class="form-control" formControlName="salary"></td>
                  <td><input type="number" class="form-control" formControlName="extraMony"></td>
                  <td><input type="number" class="form-control" formControlName="TotalCount" 
                    [ngModel]="item.controls.salary.value + item.controls.extraMony.value">
                  </td>
                </tr>
            </ng-container>
          </tbody>
</table>
</form>

DEMO2

場(chǎng)景描述：在一個(gè) form 表單中，需要?jiǎng)討B(tài)添加或刪除某個(gè)表單集

formArrayGIF.gif

創(chuàng)建表單組

  /**
   * 創(chuàng)建表單
   */
  private createForm() {
    this.detailForm = this.fb.group({
      name: [''],
      exotic_details: this.fb.array([])
    });
    this.addFormArrayItem();

  }

  /**
   * 定義 formArray
   */
  private newFormArrayItem(): FormGroup {
    return this.fb.group({
      strike_price: [],
      strike_schedule_type: [],
      payout: []
    });
  }

  /**
   * 添加表單組項(xiàng)
   */
  public addFormArrayItem() {
    this.exoticDetails.push(this.newFormArrayItem());
  }

  /**
   * 刪除表單組項(xiàng)
   */
  public removeFormArrayItem(index) {
    this.exoticDetails.removeAt(index);
  }

  /**
   * 獲取 formArray 表單
   */
  get exoticDetails(): FormArray {
    return this.detailForm.get('exotic_details') as FormArray;
  }

  /**
   * formArray 賦值
   * @param value：與formArray對(duì)應(yīng)的數(shù)組 [{strike_price: '', payout: '', ...}, ...]
   */
  private setFormArrayValues(item) {
    this.exoticDetails.patchValue(item);
  }

頁(yè)面中使用

<form [formGroup]="detailForm " (ngSubmit)="onSubmit()">
  <p>
    <label for="name">Name </label>
    <input type="text" id="name" name="name" formControlName="name">
  </p>
  <div formArrayName="exotic_details">
    <div *ngFor="let item of exoticDetails.controls; let i=index">
      <div [formGroupName]="i">
        <input type="text" formControlName="payout">
        <button (click)="removeFormArrayItem(i)">delete</button>
      </div>
    </div>
  </div>
  <p>
    <button type="submit">Submit</button>
  </p>
</form>
<p>
  <button type="button" (click)="addFormArrayItem()">add</button>
</p>