angular6.x 动态表单 FormArrayName

主要思路 利用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>