先简要介绍一下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>
网友评论