操作Form Array (实用）

最新推荐文章于 2025-05-12 12:03:03 发布

chelen_jak

最新推荐文章于 2025-05-12 12:03:03 发布

阅读量2.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angular2 Ionic3 实用

本文链接：https://blog.youkuaiyun.com/chelen_jak/article/details/90636777

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

Ionic3

175 篇文章

订阅专栏

Angular2

139 篇文章

订阅专栏

博客提供了Angular学习相关参考内容，涉及Angular响应式表单中FormArray与FormGroup相互嵌套的学习笔记，以及angular4 Form Array用patchValue增加记录、替换值的文章链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先上代码：

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.youkuaiyun.com/wjyyhhxit/article/details/84673328 （定义From Array)

2、angular4 Form Array https://www.jianshu.com/p/40d22d760f93 （用patchValue 增加记录、替换值）