操作Form Array (实用）

曾经终败给现在 2022-01-26 06:15 286阅读 0赞

先上代码：

import { FormBuilder, Validators, FormArray, FormGroup, FormControl } from '@angular/forms';
    
    protected createForm() {
        this.form = this.formBuilder.group({
            ID: [""],
            ItemTypeID: ["", Validators.required],
            StdPrice: [""],
            SysDefine: ["0"],
            Remark: [""],
            ...
            // 定义From Array 
            ItemSpecs: this.formBuilder.array([
                new FormGroup({
                    SpecName: new FormControl(null),
                    Price: new FormControl(null),
                    StdPrice: new FormControl(null),
                }),
            ]),
        });
        ...
    }
    
     {
            // 找出 Form Array
            let itemSpecs = this.form.controls['ItemSpecs'] as FormArray;
            
            // 修改记录
            specItems.map((item, index) => {
     	    itemSpecs.at(index).patchValue({
                    SpecName: item.SpecName,
                    Price: Number(item.Price),
                    StdPrice: Number(item.StdPrice),
               })
            });
           
            // 增加记录
            specItems.push({
                SpecName: item.SpecName,
                Price: Number(item.Price),
                StdPrice: Number(item.StdPrice),
            });        
    }

参考：  
1、Angular学习笔记24：Angular 响应式表单 FormArray 与 FormGroup 相互嵌套  
      [https://blog.csdn.net/wjyyhhxit/article/details/84673328 ][https_blog.csdn.net_wjyyhhxit_article_details_84673328]    （定义From Array)  
  
2、angular4 Form Array [https://www.jianshu.com/p/40d22d760f93][https_www.jianshu.com_p_40d22d760f93]  （用patchValue 增加记录、替换值）

[https_blog.csdn.net_wjyyhhxit_article_details_84673328]: https://blog.csdn.net/wjyyhhxit/article/details/84673328
[https_www.jianshu.com_p_40d22d760f93]: https://www.jianshu.com/p/40d22d760f93