Angular 4中如何将组件声明为FormControl？已用ControlValueAccessor无效

你的ControlValueAccessor实现差了几个关键环节，导致子组件和父组件的FormControl值始终没同步起来。我帮你梳理问题点和修复方案：

1. 必须注册NG_VALUE_ACCESSOR和NG_VALIDATORS令牌 #

Angular不会自动识别你的组件是可复用表单控件，得在组件的providers数组里声明这两个令牌，明确告诉Angular这个组件可以作为表单控件使用：

import { Component, forwardRef } from '@angular/core';
import { 
  ControlValueAccessor, 
  NG_VALUE_ACCESSOR, 
  NG_VALIDATORS, 
  Validator 
} from '@angular/forms';

@Component({
  selector: 'my-child-component',
  templateUrl: './my-child.component.html',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => MyChildComponent),
      multi: true
    },
    {
      provide: NG_VALIDATORS,
      useExisting: forwardRef(() => MyChildComponent),
      multi: true
    }
  ]
})
export class MyChildComponent implements ControlValueAccessor, Validator {
  // 后续代码写在这里
}

2. 完善writeValue方法，同步父组件值到子组件 #

writeValue是父组件向子组件传递初始值/变更值的入口，你之前的实现是空的，导致父组件的FormControl值无法同步到子组件内部表单：

// 假设子组件内部表单名为childForm，对应字段是selectedSeats
public writeValue(value: any): void {
  if (value && this.childForm) {
    this.childForm.patchValue({ selectedSeats: value });
  }
}

3. 监听子组件内部表单变化，主动同步到父组件 #

你之前用setter的方式可能没被正确触发，更可靠的方式是直接监听子组件内部表单的字段变化，一旦值改变就调用propagateChange把值传给父组件：

ngOnInit(): void {
  // 监听子组件内部表单的selectedSeats字段
  const selectedSeatsCtrl = this.childForm.get('selectedSeats');
  if (selectedSeatsCtrl) {
    selectedSeatsCtrl.valueChanges.subscribe(value => {
      this.propagateChange(value);
      // 如果需要触发表单触摸状态，也可以调用触摸回调
      // this.onTouched();
    });
  }
}

4. 补全ControlValueAccessor的核心方法 #

把剩余的方法补全，确保表单的状态（值变更、触摸）能正确传递：

public propagateChange: any = () => {};
public onTouched: any = () => {};
public validateFn: any = () => null;

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

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

// 验证方法，若子组件有自定义验证逻辑可在这里实现
public validate(c: FormControl): any {
  return this.validateFn(c);
}

5. 父组件动态表单的使用示例 #

如果父组件是动态嵌套表单（比如FormGroup/FormArray），添加这个控件的方式和普通FormControl一致：

// 父组件中创建动态表单
this.myForm = this.fb.group({
  // 其他表单控件...
  selectedSeats: [null] // 可根据需求设置初始值
});

模板中直接用formControlName绑定即可：

<my-child-component formControlName="selectedSeats"></my-child-component>

这样调整后，子组件内部表单的selectedSeats值变化时会自动同步到父组件的FormControl，父组件设置初始值也能同步到子组件内部，双向同步就能正常生效了。

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