Angular 5中如何向FormGroup动态添加FormControl？解决值未更新问题

嘿，我太懂这种明明UI更新了但表单值没跟上的憋屈感了！咱们一步步排查你可能漏掉的关键点：

• 核心问题：表单模型和UI没同步更新
  很多时候UI能显示新条目，但忘了把新的表单控件/组真正加入到FormArray实例里，光更新行数据数组没用。你得确保新增按钮的点击逻辑里，调用了FormArray的push方法：

  addNewEntry() {
    // 先从parentForm里拿到对应的FormArray
    const formArray = this.parentForm.get('你的FormArray字段名') as FormArray;
    // 按照表头结构创建新的FormControl/FormGroup
    const newFormGroup = this.fb.group({
      // 对应每个表头字段的控件配置，比如：
      username: ['', Validators.required],
      age: [null, Validators.min(18)]
    });
    // 关键：把新的表单组加入FormArray
    formArray.push(newFormGroup);
    // 这里再同步更新你的行数据数组（如果有的话），确保UI渲染新行
  }
  

• 模板绑定是否正确关联FormArray
  遍历表单行的时候，得绑定到FormArray的controls，而不是你自己维护的行数据数组。模板结构大概是这样：

  <form [formGroup]="parentForm">
    <!-- 先指定FormArray的名称 -->
    <div formArrayName="你的FormArray字段名">
      <!-- 遍历FormArray的controls，而不是自定义的行数组 -->
      <div *ngFor="let control of parentForm.get('你的FormArray字段名').controls; let i = index" 
           [formGroupName]="i">
        <!-- 每个表头对应的输入框，用formControlName绑定字段 -->
        <input formControlName="username" placeholder="用户名">
        <input formControlName="age" type="number" placeholder="年龄">
      </div>
    </div>
    <button (click)="addNewEntry()">新增条目</button>
  </form>
  

  要是你遍历的是自己的行数据数组，那新行只是UI渲染了，根本没和表单模型绑定，自然取不到值。

• 别踩语法坑：value是属性不是方法
  你提到打印formGroup.value()，这里要注意！FormGroup的value是只读属性，不是方法，正确的打印方式是：

  console.log(this.parentForm.value); // 没有括号！
  

  加了括号会报错或者拿到错误的结果，这可能是最容易忽略的小问题。

• 确认parentForm里的字段是FormArray类型
  初始化parentForm的时候，要确保对应的字段是用FormBuilder.array()创建的，而不是FormBuilder.group()：

  this.parentForm = this.fb.group({
    // 正确：用array创建FormArray
    yourArrayField: this.fb.array([]),
    // 错误：如果写成group，那就是普通FormGroup，不能动态push
    // yourArrayField: this.fb.group({})
  });
  

按照上面的步骤排查，应该就能解决表单值不更新的问题啦！

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