Angular可重复字段表单值同步异常问题求助

你遇到的问题核心是所有同位置的values输入框绑定了同一个数据源或表单控件，导致输入时同步更新。下面提供两种常用的解决方式：

一、模板驱动表单修复方案 #

如果用的是模板驱动表单，问题大概率出在ngModel绑定方式和name属性重复上。修改模板如下：

<form #surveyForm="ngForm">
  <input [(ngModel)]="newSurvey.surveyName" name="surveyName" placeholder="Survey Name">
  <input [(ngModel)]="newSurvey.surveyOwner" name="surveyOwner" placeholder="Survey Owner">

  <!-- 遍历questions数组，记录当前问题索引 -->
  <div *ngFor="let question of newSurvey.questions; let qIndex = index">
    <input [(ngModel)]="question.questionTitle" [name]="'questionTitle-' + qIndex" placeholder="Question Title">

    <!-- 遍历当前问题的values数组，记录选项索引 -->
    <div *ngFor="let val of question.values; let vIndex = index">
      <!-- 绑定到数组的具体索引位置，同时生成唯一name属性 -->
      <input [(ngModel)]="question.values[vIndex]" [name]="'value-' + qIndex + '-' + vIndex" placeholder="Option {{vIndex + 1}}">
    </div>

    <button type="button" (click)="addQuestion()">Add Question</button>
    <button type="button" (click)="removeQuestion(qIndex)" *ngIf="newSurvey.questions.length > 1">Remove Question</button>
  </div>
</form>

关键改动点：

• 绑定question.values[vIndex]而非循环临时变量val，确保每个输入框对应数组的具体位置
• 用qIndex和vIndex拼接生成唯一的name属性，避免模板驱动表单的控件识别冲突

二、响应式表单方案（推荐） #

对于动态嵌套的表单结构，响应式表单是更可靠的选择，通过FormArray和FormGroup为每个字段生成独立控件，从根源避免同步问题。

组件代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

@Component({
  selector: 'app-survey-form',
  templateUrl: './survey-form.component.html'
})
export class SurveyFormComponent implements OnInit {
  surveyForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化表单结构
    this.surveyForm = this.fb.group({
      surveyName: [''],
      surveyOwner: [''],
      questions: this.fb.array([this.createQuestionGroup()])
    });
  }

  // 创建单个问题的表单组，包含标题和选项数组
  private createQuestionGroup(): FormGroup {
    // 生成5个空的选项控件
    const valueControls = Array(5).fill('').map(() => this.fb.control(''));
    return this.fb.group({
      questionTitle: [''],
      values: this.fb.array(valueControls)
    });
  }

  // 获取questions的FormArray实例
  get questions(): FormArray {
    return this.surveyForm.get('questions') as FormArray;
  }

  // 获取指定问题下的values FormArray实例
  getValuesArray(questionIndex: number): FormArray {
    return this.questions.at(questionIndex).get('values') as FormArray;
  }

  // 添加新问题
  addQuestion(): void {
    this.questions.push(this.createQuestionGroup());
  }

  // 删除指定问题
  removeQuestion(index: number): void {
    if (this.questions.length > 1) {
      this.questions.removeAt(index);
    }
  }

  // 提交表单时获取数据
  onSubmit(): void {
    console.log(this.surveyForm.value);
    // 这里可以处理表单提交逻辑
  }
}

模板代码 #

<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
  <input formControlName="surveyName" placeholder="Survey Name">
  <input formControlName="surveyOwner" placeholder="Survey Owner">

  <!-- 遍历questions FormArray -->
  <div formArrayName="questions" *ngFor="let question of questions.controls; let qIndex = index">
    <div [formGroupName]="qIndex">
      <input formControlName="questionTitle" placeholder="Question Title">

      <!-- 遍历当前问题的values FormArray -->
      <div formArrayName="values" *ngFor="let val of getValuesArray(qIndex).controls; let vIndex = index">
        <input [formControlName]="vIndex" placeholder="Option {{vIndex + 1}}">
      </div>
    </div>

    <button type="button" (click)="addQuestion()">Add Question</button>
    <button type="button" (click)="removeQuestion(qIndex)" *ngIf="questions.length > 1">Remove Question</button>
  </div>

  <button type="submit">Submit Survey</button>
</form>

这种方式通过为每个问题和选项创建独立的表单控件，彻底避免了绑定冲突，同时也更便于表单验证、状态管理等复杂逻辑的扩展。

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