主要思路 利用this.fb.array 先占位formControl
添加的时候再重新构造formArray -》setControl重新修改Control
展示代码是两层formArray嵌套 代码有点复杂且不完整 请谅解~
html注意formArrayName formGroupName 的使用就ok了
formArrayName是占位formControl的名字
formGroupName是动态array的下表 因为再formArray集合里面每个对象是以下标区分的 下表即代表formGroup
tip:
formGroup的get方法可以通过get('aa.bb')获取Control里的子Control
ts
addName() {
this.show = false;
let attr = this.commonForm.get("attributeGroups") as FormArray;
let next = 9999
if (attr.length != 0) {
attr.get(attr.length - 1 + "").patchValue({
next: attr.length
})
}
let attributeNameaa = this.fb.group({
groupName: [''],
lock: [false],
attributes: this.fb.array([this.fb.group({
attrValue: ''
})]
),
next: next
})
if (this.attrArryForm.length == 0) {
attr.push(attributeNameaa)
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
console.log(this.attrArryForm);
} else {
attr.push(attributeNameaa)
attr = this.commonForm.get("attributeGroups") as FormArray;
if (attr.value[attr.length - 2].attrName == '') {
attr.removeAt(this.attrArryForm.length - 1);
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
console.log(this.attrArryForm);
this.dialogService.toast('warning', '提示', '请填写属性名');
return;
} else {
attr = this.commonForm.get("attributeGroups") as FormArray;
if (attr.value[attr.length - 2].attributes[0].attrValue == '') {
attr.removeAt(this.attrArryForm.length - 1);
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
console.log(this.attrArryForm);
this.dialogService.toast('warning', '提示', '请填写属性值');
return;
}
}
}
}
addValue(i) {
this.show = false;
let attributeValues = this.fb.group({
attrValue: ''
});
let attr = this.commonForm.get("attributeGroups") as FormArray;
let newVar = attr.get(i + ".attributes") as FormArray;
newVar.push(attributeValues)
if (newVar.value[newVar.length - 2].attrValue == '') {
newVar.removeAt(newVar.length - 1)
this.dialogService.toast('warning', '提示', '属性值不能为空');
}
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
}
/**
* 删除属性名(属性值一起删除)
* @param i(属性名下标)
*/
deleteName(i) {
this.show = false;
let attr = this.commonForm.get("attributeGroups") as FormArray;
attr.removeAt(i)
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
}
/**
* 删除属性值
* @param i(属性名下标)
* @param j(属性值下标)
*/
deleteValue(i, j) {
this.show = false;
let attr = this.commonForm.get("attributeGroups") as FormArray;
let newVar = attr.get(i + ".attributes") as FormArray;
newVar.removeAt(j)
this.attrArryForm = this.commonForm.get("attributeGroups") as FormArray
}
html
<div formArrayName="attributeGroups">
<div class="form-group row text-sm-right" *ngFor="let form of attrArryForm.controls ; let i=index;">
<label class="col-sm-2 form-control-label mt-1">属性组</label>
<div [formGroupName]="i" class="col-sm-4" [ngClass]="{'has-error':form.get('groupName')|formMark}">
<input (click)="unLock(form)" class="form-control validation-field" type="text"
formControlName="groupName" [readonly]="form.value.lock"
placeholder="请输入属性名" (blur)="lock(form)"><!--[disabled]="nameState[i]"-->
<label (click)="deleteName(i)">删除</label>
<br>
<button (click)="addValue(i)" class="col-sm-4 btn btn-info" type="button">添加属性</button>
<div formArrayName="attributes">
<br>
<span *ngFor="let value of attrArryForm.get(i+'.attributes').controls; let j=index;"
[formGroupName]="j">
<input class="form-control validation-field" type="text"
formControlName="attrValue"
placeholder="请输入属性值" (blur)="lock(value)">
<label (click)="deleteValue(i,j)">删除</label>
<br>
</span>
</div>
</div>
</div>
</div>
<div class="form-group row text-sm-right">
<button (click)="addName()" class="col-sm-1 btn btn-info" style="margin-left: 7%" type="button">添加属性组
</button>
<button (click)="addTrue()" class="col-sm-1 btn btn-info" style="margin-left: 7%" type="button">插入表格
</button>
</div>