美文网首页
angular4 Form Array

angular4 Form Array

作者: 云上笔记 | 来源:发表于2018-12-18 21:19 被阅读0次

先简要介绍一下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>

相关文章

网友评论

      本文标题:angular4 Form Array

      本文链接:https://www.haomeiwen.com/subject/dejlkqtx.html