Angular FormArray调用setValue报'is not a function'错误解决

• 核心触发点：this.form.value 返回的是表单的纯数据快照，不是Angular响应式表单的控件对象。顺着这条链路拿到的practiceSet[i].skilltwo就是个普通字符串，没有setValue方法，直接调用自然抛出类型错误。
• 现有代码的其他连带问题：
  • practiceSetArray() 方法创建完FormGroup后没有写返回值，初始化FormArray时传入的实际是undefined，表单结构根本没有正确构建
  • 模板里的formControlName="Skill set"和TS定义的skillone、skilltwo字段名不匹配，双向绑定完全失效
  • 没有标准化的FormArray引用链路，后续操作数组内的子控件都会出现路径不匹配的问题

1. 修正表单初始化逻辑 #

补全FormGroup生成方法的返回值，把现有JSON数据映射为正确的表单控件结构：

// 生成单条practiceSet的FormGroup，支持传入初始值
practiceSetArray(initValue = { skillone: '', skilltwo: '' }) {
  return new FormGroup({
    skillone: new FormControl(initValue.skillone),
    skilltwo: new FormControl(initValue.skilltwo)
  })
}

// 初始化完整表单
this.form = this.fb.group({
  game: this.fb.control('football'),
  practiceSet: this.fb.array([
    this.practiceSetArray({ skillone: 'running', skilltwo: 'chasing' }),
    this.practiceSetArray({ skillone: 'jump', skilltwo: 'gym' })
  ])
})

2. 封装统一的FormArray引用 #

在组件类里加个getter方法，固定从表单实例上获取practiceSet对应的FormArray，避免零散写取值路径出现拼写错误：

// 从form实例上取practiceSet数组并断言为FormArray类型
get practiceSetArray() {
  return this.form.get('practiceSet') as FormArray
}

3. 修正设值方法的控件获取路径 #

跳过.value的链路，顺着FormArray的层级拿到目标索引下的FormGroup，再获取对应字段的FormControl实例后调用设值方法：

skillset(i: number, idval: string | number) {
  // 从FormArray上取第i个位置的控件，断言为FormGroup类型
  const targetGroup = this.practiceSetArray.at(i) as FormGroup
  // 给skilltwo设置目标值，可选链避免控件不存在时报空错
  targetGroup.get('skilltwo')?.setValue(idval)

  // 如果需要修改同组下的skillone，直接取对应控件即可
  // targetGroup.get('skillone')?.setValue(你要设置的skillone的值)
}

4. 修正模板的控件绑定 #

把模板里写错的formControlName替换成和TS定义一致的字段名，确保双向绑定能正确关联到表单控件：

<ng-container formArrayName="practiceSet" *ngFor="let group of practiceSetArray.controls; let i = index;">
  <tr [formGroupName]="i">
    <td>{{i+1}}</td>
    <td>
      <mat-form-field>
        <!-- 原来的"Skill set"为错误绑定名，替换为定义的skillone/skilltwo即可 -->
        <input matInput readonly formControlName="skillone">
      </mat-form-field>
    </td>
  </tr>
</ng-container>

注意事项：所有表单值的修改操作，都必须通过FormControl实例的setValue或patchValue方法完成。直接修改form.value上的字段不会触发表单的状态更新，也不会同步到视图。

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