使用Signal的ControlValueAccessor组件，如何在effect中更新FormControl且无需allowSignalWrites？

问题背景 #

自定义InputComponent通过ControlValueAccessor实现，内部用Signal存储状态，writeValue方法负责更新该Signal；在ClientComponent中绑定了FormControl（fcUrl），原本通过effect监听组件的url Signal来更新fcUrl，但因writeValue会触发Signal写入，必须配置{ allowSignalWrites: true }才能避免NG0600错误。以下是两种无需依赖RxJStoObservable的解决方法：

方案一：用untracked隔离FormControl更新操作 #

Angular的untracked函数可以在effect内部创建一段不被响应式系统追踪的代码块，让FormControl的更新操作脱离Signal写入的判定逻辑，从而绕过NG0600错误。

示例代码：

effect(() => {
  const currentUrl = this.inputComponent.url();
  untracked(() => {
    this.fcUrl.setValue(currentUrl);
  });
});

核心逻辑：untracked会屏蔽内部代码的依赖追踪，FormControl的更新不会被Angular判定为“在effect中写入Signal”，因此无需设置allowSignalWrites。

方案二：遵循ControlValueAccessor规范，由组件主动通知外部更新 #

既然组件已经实现了ControlValueAccessor，可以让组件内部的Signal变化时主动触发onChange回调，直接同步更新绑定的FormControl，彻底避免在父组件effect中反向更新的场景。

步骤1：修改InputComponent，在Signal变化时触发onChange #

@Component({
  selector: 'app-input',
  template: '<input [value]="value()" (input)="handleInput($event)">',
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => InputComponent),
      multi: true
    }
  ]
})
export class InputComponent implements ControlValueAccessor {
  value = signal('');
  private onChange = (value: string) => {};
  private onTouched = () => {};

  writeValue(value: string): void {
    this.value.set(value);
  }

  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  handleInput(event: Event): void {
    const newValue = (event.target as HTMLInputElement).value;
    this.value.set(newValue);
    this.onChange(newValue); // 主动通知外部FormControl更新
  }

  // 若Signal存在其他更新途径，可通过effect监听并触发回调
  constructor() {
    effect(() => {
      this.onChange(this.value());
    });
  }
}

步骤2：ClientComponent中直接绑定FormControl即可 #

@Component({
  selector: 'app-client',
  template: '<app-input [formControl]="fcUrl"></app-input>'
})
export class ClientComponent {
  fcUrl = new FormControl('');
}

核心逻辑：完全遵循ControlValueAccessor的设计意图，组件内部状态变化主动同步到外部表单控件，父组件无需额外编写effect更新逻辑，从根源上消除了NG0600错误的触发条件。

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