Angular中FormArray数据获取异常：提交时答案值未更新

问题场景 #

实现带多个答案选项的问题表单时，输入答案文本和数值后，提交结果始终显示默认值（text为"d"，value为0），输入内容未同步到表单数据中。提交示例结果：

{
  "question": "question1",
  "questionType": 1,
  "answers": [
    {
      "text": "d",
      "value": 0
    }
  ]
}

组件代码 #

formGroup!: FormGroup;
answerFormGroup: FormGroup = this.formBuilder.group({
  text: ['d', Validators.required],
  value: [0, Validators.required]
});
ngOnInit() {
  this.formGroup = this.formBuilder.group({
    question: ['', Validators.required],
    questionType: [1, Validators.required],
    answers: new FormArray([])
  });
  this.questionTypes = this.localDataService.questionType;
  this.addAnswer();
}

// 便捷的 getter，用于快速访问表单字段
get answers() {
  return this.formGroup.controls["answers"] as FormArray;
}

addAnswer() {
  this.answers.push(this.formBuilder.group({
    text: ['d', Validators.required],
    value: [0]
  }));
}

submit() {
  console.log(JSON.stringify(this.formGroup.value));
}

模板代码 #

<form class="question-card" [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>问题</mat-label>
        <input matInput formControlName="question" placeholder="问题">
    </mat-form-field>
    <mat-form-field>
        <mat-label>类型</mat-label>
        <mat-select formControlName="questionTypeControl" (selectionChange)="updateQuestionType($event)">
            @for (item of questionTypes; track item) {
                <mat-option [value]="item.id">
                    <mat-icon>{{item.icon}}</mat-icon> {{item.text}}
                </mat-option>
            }
        </mat-select>
    </mat-form-field>  
    <div [formGroup]="answerFormGroup">
    @for(item of answers.controls; track item){
        <mat-form-field>
            <mat-label>值</mat-label>
            <input matInput type="text" formControlName="value">
        </mat-form-field>
        <mat-icon class="delete-btn" (click)="deleteAnswer($event)">delete_forever</mat-icon>
        <mat-form-field>
            <mat-label>文本</mat-label>
            <input matInput type="text" formControlName="text">
        </mat-form-field>
    }
    </div>
    <button mat-mini-fab (click)="addAnswer()">
            <mat-icon>add</mat-icon>
    </button>
    <button type="button" (click)="submit()">提交</button>
</form>

原因分析 #

1. FormArray绑定错误：模板循环answers.controls时，未将输入框绑定到对应FormGroup，反而绑定到独立的answerFormGroup，导致输入值无法同步到formGroup内的answers数组。
2. 控件名不匹配：模板中mat-select的formControlName是questionTypeControl，但组件内formGroup定义的是questionType，导致类型选择无法同步。
3. 缺失删除方法：模板有deleteAnswer点击事件，但组件未实现，会触发报错。

修复方案 #

1. 修正模板绑定 #

修改答案选项循环部分，使用formArrayName和[formGroupName]正确绑定FormArray中的每个FormGroup：

<form class="question-card" [formGroup]="formGroup">
    <mat-form-field>
        <mat-label>问题</mat-label>
        <input matInput formControlName="question" placeholder="问题">
    </mat-form-field>
    <mat-form-field>
        <mat-label>类型</mat-label>
        <!-- 修正控件名匹配组件内定义 -->
        <mat-select formControlName="questionType" (selectionChange)="updateQuestionType($event)">
            @for (item of questionTypes; track item) {
                <mat-option [value]="item.id">
                    <mat-icon>{{item.icon}}</mat-icon> {{item.text}}
                </mat-option>
            }
        </mat-select>
    </mat-form-field>  

    <!-- 绑定answers数组 -->
    <div formArrayName="answers">
        <!-- 通过索引绑定对应FormGroup -->
        @for((item, index) of answers.controls; track item; let index = $index){
            <div [formGroupName]="index">
                <mat-form-field>
                    <mat-label>值</mat-label>
                    <input matInput type="text" formControlName="value">
                </mat-form-field>
                <mat-icon class="delete-btn" (click)="deleteAnswer(index)">delete_forever</mat-icon>
                <mat-form-field>
                    <mat-label>文本</mat-label>
                    <input matInput type="text" formControlName="text">
                </mat-form-field>
            </div>
        }
    </div>

    <button mat-mini-fab (click)="addAnswer()">
            <mat-icon>add</mat-icon>
    </button>
    <button type="button" (click)="submit()">提交</button>
</form>

2. 实现删除方法 #

在组件类中添加deleteAnswer方法，根据索引删除FormArray中的对应项：

deleteAnswer(index: number) {
  this.answers.removeAt(index);
}

3. 移除无用变量 #

组件中answerFormGroup未被使用，可直接删除：

// 删除该行代码
// answerFormGroup: FormGroup = this.formBuilder.group({...});

验证修复 #

修改后输入答案文本和数值，提交即可看到表单数据同步更新，示例结果：

{
  "question": "question1",
  "questionType": 1,
  "answers": [
    {
      "text": "自定义文本",
      "value": "10"
    }
  ]
}

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