Angular响应式表单数组仅显示数组首项的问题求助

你遇到的问题核心在于：patchValue 只会更新已存在的表单控件值，但不会自动为 FormArray 创建新的 FormGroup 实例。你初始化 actions 时只创建了一个空的 FormGroup，所以加载编辑数据时，只有第一个 action 会被赋值显示，剩下的项因为没有对应的表单控件，自然无法渲染出来。

下面是具体的修复步骤：

1. 修改 ngOnInit 中的数据赋值逻辑 #

在获取到后端返回的 advice 数据后，你需要先清空原有的 FormArray，然后根据返回的 actions 数组长度，逐个创建 FormGroup 并添加到 FormArray 中，最后再赋值。

修改后的 ngOnInit 代码如下：

ngOnInit() {
  this.id = this.route.snapshot.params['id'];
  this.isAddMode = !this.id;
  
  // 初始化表单（保持原有逻辑）
  this.adviceForm = this.fb.group({
    title: ['', Validators.required],
    description: ['', Validators.required],
    sourceUrl: ['', Validators.required],
    actions: this.fb.array([]) // 这里先初始化空数组，后面根据数据动态添加
  });

  if (!this.isAddMode) {
    this.adviceService.getAdvice(this.id)
      .pipe(first())
      .subscribe(advice => {
        // 先处理 actions 数组
        this.setActions(advice.actions);
        // 再给其他表单控件赋值
        this.adviceForm.patchValue({
          title: advice.title,
          description: advice.description,
          sourceUrl: advice.sourceUrl
        });
      });
  } else {
    // 新增模式下默认添加一个空的 action
    this.onAddAction();
  }
}

// 新增专门处理 actions 赋值的方法
setActions(actions: any[]) {
  const actionControls = actions.map(action => this.fb.group({
    id: action.id,
    what: action.what,
    how: action.how
  }));
  const actionFormArray = this.fb.array(actionControls);
  this.adviceForm.setControl('actions', actionFormArray);
}

2. 优化 onAddAction 方法（可选） #

复用 actions 的 getter 让代码更简洁：

get actions(): FormArray {
  return this.adviceForm.get('actions') as FormArray;
}

onAddAction(): void {
  this.actions.push(this.createAction());
}

为什么原来的代码不行？ #

当你调用 this.adviceForm.patchValue(x) 时，Angular 会尝试把 x.actions 的值赋值给 actions 这个 FormArray，但此时 FormArray 里只有一个 FormGroup，所以只有第一个 action 会被匹配赋值，剩下的项因为没有对应的表单控件，无法被渲染到页面上。

通过动态创建与后端返回数据数量一致的 FormGroup 并添加到 FormArray，就能让所有的 action 项都正确显示了。

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