FormArray内绑定基于ControlValueAccessor的自定义FormGroup失效问题

问题核心原因 #

你的子组件实现了ControlValueAccessor，本质是自定义表单控件，但父组件模板里直接用[formGroup]="control"绑定的方式是错误的：

• FormArray中的每一项是FormControl，对应子组件的完整表单值（包含childProp1、childProp2的对象），而非FormGroup实例
• 直接传递formGroup会绕开ControlValueAccessor的同步机制，导致子组件内部的操作无法通知父表单更新

解决方案 #

修正父组件的绑定方式，让子组件以自定义表单控件的形式和FormArray中的FormControl绑定，同时确保子组件内部正确同步表单值到父组件。

1. 父组件模板修正

将[formGroup]="control"替换为[formControl]="control"，或者在formArrayName作用域内用formControlName绑定数组索引：

<div [formGroup]="form">
    <div formArrayName="children">
         <div *ngFor="let control of form.get('children').controls; let controlIndex = index">
            <!-- 方式1：直接绑定FormControl实例 -->
            <app-child [formControl]="control"></app-child>
            
            <!-- 方式2：用formControlName绑定数组索引（需在formArrayName作用域内） -->
            <!-- <app-child formControlName="{{controlIndex}}"></app-child> -->
        </div>
    </div>
</div>

2. 子组件关键实现（确保ControlValueAccessor正常工作）

子组件内部维护自己的FormGroup，通过ControlValueAccessor的方法和父组件的FormControl同步值：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => ChildComponent),
      multi: true
    }
  ]
})
export class ChildComponent implements ControlValueAccessor {
  childForm: FormGroup;
  private onChange: (value: any) => void = () => {};
  private onTouched: () => void = () => {};

  constructor(private fb: FormBuilder) {
    // 初始化子表单
    this.childForm = this.fb.group({
      childProp1: this.fb.array([]),
      childProp2: this.fb.array([]),
    });

    // 监听内部表单变化，同步到父组件
    this.childForm.valueChanges.subscribe(value => {
      this.onChange(value);
    });
  }

  // ControlValueAccessor 接口方法：接收父组件传递的值
  writeValue(value: any): void {
    if (value) {
      this.childForm.patchValue(value, { emitEvent: false });
    }
  }

  // 注册值变更回调
  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

  // 注册触摸回调
  registerOnTouched(fn: any): void {
    this.onTouched = fn;
  }

  // 设置禁用状态
  setDisabledState(isDisabled: boolean): void {
    isDisabled ? this.childForm.disable({ emitEvent: false }) : this.childForm.enable({ emitEvent: false });
  }

  // 内部操作方法示例
  add1(): void {
    (this.childForm.get('childProp1') as FormArray).push(this.fb.control(''));
  }

  remove1(index: number): void {
    (this.childForm.get('childProp1') as FormArray).removeAt(index);
  }

  add2(): void {
    (this.childForm.get('childProp2') as FormArray).push(this.fb.control(''));
  }
}

补充说明 #

• 子组件内部的valueChanges监听会在表单变化时自动调用onChange，将最新值同步给父组件的FormControl
• 使用patchValue时添加{ emitEvent: false }可以避免循环触发变更
• 若需要在父组件中初始化子表单数据，直接给FormArray的FormControl赋值即可，子组件会通过writeValue接收并更新内部表单

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