Angular 14动态生成表单控件时出现feature_r5.get不是函数错误

错误原因 #

你在*ngFor里遍历的是advForm.get('features')?.value，这是表单数组的原始值对象，并非FormGroup实例，所以调用get()方法会触发报错。

修复步骤 #

1. 修正*ngFor遍历对象 #

把遍历目标从表单值改成表单数组的控件集合：

<div formArrayName="features" *ngFor="let feature of advForm.get('features')?.controls; let i = index">

如果担心空值问题，也可以用advForm.controls['features']?.controls，或者添加非空断言（前提是组件中已正确初始化FormArray）。

2. 优化formGroupName绑定写法 #

将插值语法改为属性绑定，更符合Angular规范：

<div [formGroupName]="i">

替代原来的attr.formGroupName="{{i}}"。

3. 完善表单控件状态判断逻辑 #

现在feature是FormGroup实例，可正常调用get()方法，建议添加安全导航操作符?.避免空值报错：

<div class="form-group" [ngClass]="{'has-error' : feature.get('fName')?.invalid && feature.get('fName')?.touched}">
<!-- ... -->
<span class="help-block" *ngIf="feature.get('fName')?.errors?.required && feature.get('fName')?.touched">
    Feature is required
</span>

4. 确保组件中FormArray初始化正确 #

组件内的addFeatureButtonClick()方法要正确向FormArray添加FormGroup实例，示例：

addFeatureButtonClick() {
  const features = this.advForm.get('features') as FormArray;
  features.push(this.formBuilder.group({
    fName: ['', Validators.required]
  }));
}

同时初始化表单时要正确创建FormArray：

this.advForm = this.formBuilder.group({
  // 其他表单控件
  features: this.formBuilder.array([])
});

完整修复后的HTML模板片段 #

<div id="features" class="tab-pane mytab-pane">
    <div class="form-group">
        <button type="button" class="btn btn-primary" (click)="addFeatureButtonClick()">Add</button>
    </div>

    <div formArrayName="features" *ngFor="let feature of advForm.get('features')?.controls; let i = index">
        <div [formGroupName]="i">
            <div class="form-group" [ngClass]="{'has-error' : feature.get('fName')?.invalid && feature.get('fName')?.touched}">
                <div class="input-group">
                    <span class="input-group-prepend">
                        <label class="input-group-text"><strong>Features</strong></label>
                    </span>
                    <input type="text" id="{{'fName'+i}}" name="fName" class="form-control" placeholder="Features"
                        formControlName="fName"/>
                </div>
                <span class="help-block" *ngIf="feature.get('fName')?.errors?.required && feature.get('fName')?.touched">
                    Feature is required
                </span>
            </div>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Junior Dev