angular4 Form Array

先简要介绍一下angular表单的三大基本构造块
1.FormControl：单个独立的表单控件；
2.FormGroup：一组FormControl实例；
3.FormArray：控件数组，控件可为FormControl、FormGroup、FormArray的实例；

FormBuilder： 根据用户指定的配置创建abstractControl，FormBuilder提供的语法糖可快速实例化FormControl、FormGroup、FormArray。

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

FormArray的使用场景：需要循环遍历的表格，实现动态增加或删除表数据
常用方法：

• at($index); 获取数组中位于index处的控件
• push(); 数组末尾插入新的控件
• removeAt($index) ; 移除数组中位于index处的控件
• patchValue(); 赋值

DEMO

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;
}

// 将获取的详情数据循环赋给表单组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
表格中如果有合计需要动态计算，可在合计中使用ngModel绑定需要累加的控件值

<form [formGroup]="userModel">
<table>
          <thead>
              <tr>
                  <th>电话</th>
                  <th>薪水</th>
                  <th>额外薪水</th>
                  <th>合计</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>