angular6.x 동적 양식 FormArrayName

주요 사고방식 이용this.fb.array 선점formControl

추가할 때 formArray 재구성 - set Control 다시 수정 Control

전시 코드는 2층formArray 플러그인 코드로 좀 복잡하고 완전하지 않은 점 양해해주세요~

htmlformArrayName formGroupName의 사용을 주의하시면 됩니다.

formArrayName 은 formControl 의 이름입니다.

formGroupName은 동적array의 다음 표입니다. 왜냐하면formArray 집합에 있는 모든 대상은 다음과 같은 표로 구분된 다음 표는formGroup을 대표합니다.

  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
    }