Angular 5响应式表单数组指定索引插入值异常问题

嘿，我之前也踩过这个坑！直接修改this.SurveyForm.value是完全错误的做法——因为value只是表单当前状态的只读快照，手动修改它不仅不会同步到表单控件的实际状态，还会破坏表单的结构，这就是你看到键被移除的原因。

正确的操作方式：通过表单控件API更新 #

Angular响应式表单提供了专门的方法来修改控件值，我们需要通过FormArray和FormGroup的API来定位到目标控件，再进行赋值：

1. 获取表单数组和目标表单组
   首先要拿到Questions对应的FormArray，再通过索引获取到要修改的问题表单组：

   const questionsArray = this.SurveyForm.get('Questions') as FormArray;
   const targetQuestionGroup = questionsArray.at(index) as FormGroup;
   

2. 更新QuestionType的值
   可以用两种方式更新：

   • 用patchValue批量更新（适合同时修改多个字段）：

     targetQuestionGroup.patchValue({ QuestionType: ID });
     

   • 直接定位到QuestionType控件用setValue赋值（更精准）：

     targetQuestionGroup.get('QuestionType')?.setValue(ID);
     

修复你的代码片段 #

把你原来的方法改成这样就没问题了：

selectType(ID: number, event, index) {
  // 1. 获取Questions表单数组
  const questionsArray = this.SurveyForm.get('Questions') as FormArray;
  // 2. 获取指定索引的问题表单组
  const targetQuestion = questionsArray.at(index) as FormGroup;
  // 3. 赋值QuestionType
  targetQuestion.patchValue({ QuestionType: ID });
}

关键前提：确保表单控件已正确初始化 #

还要注意，你的表单数组里的每个问题表单组必须预先初始化QuestionType控件，不然Angular找不到这个控件，赋值还是会失败。比如初始化表单的代码应该是这样的：

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

// 构造函数注入FormBuilder
constructor(private fb: FormBuilder) {}

ngOnInit() {
  // 初始化单个问题的表单组
  const createQuestionGroup = (): FormGroup => {
    return this.fb.group({
      QuestionName: [''],
      QuestionType: [''], // 必须初始化这个控件！
      AnswersList: this.fb.array([
        this.fb.group({ Answer: [''] })
      ])
    });
  };

  // 初始化整个表单
  this.SurveyForm = this.fb.group({
    SurveyName: [''],
    Questions: this.fb.array([createQuestionGroup()])
  });
}

为什么直接修改value不行？ #

this.SurveyForm.value返回的是一个普通JavaScript对象，它只是表单当前状态的副本。修改这个对象不会触发表单的变更检测，也不会同步到底层的FormControl/FormGroup/FormArray实例。当表单重新计算value时，你的修改会被覆盖，甚至因为控件未初始化，导致对应的键被“移除”。

永远记住：操作Angular响应式表单，一定要通过它提供的API来进行，不要直接碰value对象！

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