Angular Form的FormArray 和 FormGroup操作 (实用、备忘、赞)

仲孙文乐
2023-12-01

1、Angular学习笔记45:响应式表单-FormArray & 动态的增加、减少FormArray中的元素 & 给FormArray 赋值


2、Angular学习笔记48:响应式表单-FormArray 和 FormGroup的多层嵌套
 

博主网址:https://me.csdn.net/wjyyhhxit  (值得关注)

 

3、angular6.x 动态表单 FormArrayName经实践多层嵌套可用, 推荐!推荐!推荐!

4、[Angular]——创建表单之FormArray、FormGroup (动态定义表单的属性,推荐!
【静态定义表单】

        this.form = this.fb.group({
            ID: [""],
            ItemNo: ["", Validators.required],
            ItemName: ["", Validators.required],
            Remark: [""],
            ItemSpecs: this.fb.array([
                new FormGroup({
                    ID: new FormControl(null),
                    ItemID: new FormControl(null),
                    IndexNo: new FormControl(null),
                    SpecName: new FormControl(null),
                    StdPrice: new FormControl(null),
                }),
            ]),
        });

【动态定义表单】
 

        this.form = this.fb.group({
            ID: [""],
            ItemNo: ["", Validators.required],
            ItemName: ["", Validators.required],
            Remark: [""],
            ItemSpecs: this.fb.array([]),
        });
        
        // 动态设置定段
        let itemSpecs = this.form.controls["ItemSpecs"] as FormArray;
        let aSpec = new FormGroup({});
        aSpec.addControl('ID', new FormControl(null));
        aSpec.addControl('ItemID', new FormControl(null));
        aSpec.addControl('IndexNo', new FormControl(null));
        aSpec.addControl('SpecName', new FormControl(null));
        aSpec.addControl('StdPrice', new FormControl(null));
        itemSpecs.push(aSpec);

 

 类似资料: