动态表单与FormArray简介
在angular的响应式表单中，formarray是一个强大的工具，用于管理一个动态的表单控件集合，例如一个商品列表、一个联系人列表或本例中的一个特征列表。它允许我们在运行时添加、删除或重新排序表单控件组。然而，不正确的实现方式常常会导致运行时错误，其中最常见的就是typeerror: feature_r5.get is not a function。
这个错误通常发生在尝试在一个非AbstractControl对象上调用.get()方法时。在*ngFor循环中，如果迭代的是FormArray的value属性，那么循环变量feature将是一个普通的JavaScript对象，而不是一个FormGroup或FormControl实例。普通的JavaScript对象不具备.get()方法，因此会导致上述错误。
核心问题与错误分析
原始代码中导致TypeError的主要问题在于：
- 错误的迭代方式： *ngFor="let feature of advForm.get('features')?.value"。这里迭代的是FormArray的当前值，这是一个包含表单数据（普通对象）的数组，而非实际的表单控件实例。当尝试在这些普通数据对象上调用feature.get('fName')时，就会抛出TypeError。
- formGroupName的错误使用： attr.formGroupName="{{i}}"。formGroupName是一个Angular指令，应该通过属性绑定[]来使用，而不是作为HTML属性attr.。
正确实现动态表单的步骤
为了避免上述错误并正确实现动态表单，我们需要遵循以下几个关键点：
1. 定义FormArray的Getter方法
首先，在你的组件类中为FormArray创建一个getter方法。这样做有几个好处：它提高了代码的可读性，并确保我们在模板中始终访问的是FormArray的实际控件集合。
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
@Component({
selector: 'app-post-adv',
templateUrl: './post-adv.component.html',
styleUrls: ['./post-adv.component.css']
})
export class PostAdvComponent implements OnInit {
advForm: FormGroup;
constructor(private fb: FormBuilder) {}
ngOnInit(): void {
this.advForm = this.fb.group({
// 其他表单控件...
features: this.fb.array([]) // 初始化为空的FormArray
});
}
// 为FormArray创建一个getter
get featuresFormArray(): FormArray {
return this.advForm.get('features') as FormArray;
}
// 添加特征按钮的点击事件
addFeatureButtonClick(): void {
this.featuresFormArray.push(this.createFeatureGroup());
}
// 创建一个新的特征FormGroup
createFeatureGroup(): FormGroup {
return this.fb.group({
fName: ['', Validators.required]
});
}
// 可选：移除特征
removeFeature(index: number): void {
this.featuresFormArray.removeAt(index);
}
}2. 迭代FormArray的controls集合
在模板中，*ngFor指令应该迭代FormArray的controls属性，而不是value属性。controls属性返回一个AbstractControl数组，其中每个元素都是一个FormGroup或FormControl实例，它们拥有.get()方法。
3. 正确绑定formGroupName指令
formGroupName是一个指令，用于将FormArray中的每个FormGroup绑定到对应的HTML元素。它应该使用属性绑定[]，而不是字符串插值或attr.绑定。
功能列表：底层程序与前台页面分离的效果，对页面的修改无需改动任何程序代码。完善的标签系统，支持自定义标签，公用标签，快捷标签，动态标签，静态标签等等，支持标签内的vbs语法，原则上运用这些标签可以制作出任何想要的页面效果。兼容原来的栏目系统，可以很方便的插入一个栏目或者一个栏目组到页面的任何位置。底层模版解析程序具有非常高的效率，稳定性和容错性，即使模版中有错误的标签也不会影响页面的显示。所有的标
4. 使用安全导航操作符访问控件属性
在模板中访问表单控件的属性（如invalid、touched、errors）时，为了避免在控件可能为null或undefined时（例如在异步加载或初始化过程中）抛出错误，建议使用安全导航操作符?.。
Feature is required Feature is required
完整的模板示例
结合上述所有修正，以下是优化后的HTML模板代码：
Feature is required
总结与最佳实践
通过本文的讲解，我们可以看到，在Angular中正确使用FormArray构建动态表单需要注意以下几点：
- 迭代controls而非value： 这是解决TypeError: feature_r5.get is not a function的关键。controls提供了对实际表单控件实例的引用，而value只是数据快照。
- 正确绑定指令： formGroupName、formControlName等指令应使用属性绑定[]。
- 使用Getter简化模板： 为FormArray创建getter方法，可以使模板代码更简洁、可读性更强。
- 安全导航操作符?.： 在访问表单控件的属性或方法时，尤其是在动态或异步场景下，使用?.可以有效防止运行时错误。
- 结构清晰： 将formArrayName放在*ngFor的外部，包围整个动态表单区域，可以使表单结构更符合Angular的响应式表单设计模式。
遵循这些最佳实践，将有助于您在Angular应用中构建出更加健壮、易于维护的动态表单。
