主要思路 利用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 = 9999if (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 FormArrayconsole.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 FormArrayconsole.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 FormArrayconsole.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>