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

 

                

                    属性组
                    

                        
                        删除
                        

                        添加属性
                        

                            

                            
                                        
                                        删除
                                    

                                
                        

                    
                
            
            

                添加属性组
                
                插入表格