调用registeredOnChange()时ControlValueAccessor的writeValue()未被调用问题咨询

Alright, let's break down what's going on here with your ControlValueAccessor (CVA) implementation, and why writeValue isn't behaving as you expect.

First, let's clarify the core roles of the key CVA methods—this is where the confusion often happens:

• writeValue: This is Angular's way of pushing value changes from the parent form control into your component. It only gets called when the external form value updates (like when you run formControl.setValue('new-image-url') in a parent component).
• registerOnChange: This method lets Angular pass a callback to your component, which you should invoke when your component's internal value changes to notify the parent form of the update. This is the internal-to-external flow, not the other way around.

Looking at your code, the critical missing piece is a proper implementation of registerOnChange (and likely registerOnTouched too). You declared an onChange default function, but you never let Angular replace it with its own callback. Plus, you didn't show a complete writeValue implementation either.

Here's the Fixed Component Code #

@Component({ 
  selector: 'image-handler', 
  templateUrl: 'image-handler.html', 
  providers: [ 
    { 
      provide: NG_VALUE_ACCESSOR, 
      useExisting: forwardRef(() => ImageHandlerComponent), 
      multi: true 
    } 
  ] 
}) 
export class ImageHandlerComponent implements ControlValueAccessor{ 
  @Input() customFormEntity: ImageHandlerEntity; 
  value: string; 

  setValue(value: string) { 
    console.log(`setValue() ${value}`);
    // Update your internal state first
    this.value = value;
    // Now notify the parent form via the Angular-provided callback
    this.onChange(value);
    // Don't forget to mark the control as touched if needed
    this.onTouched();
  } 

  // These will hold the callbacks Angular provides
  onChange = (_value: string) => { 
    console.log('onChange() not overridden'); 
  }; 

  onTouched = () => {};

  // Required: Accept the Angular callback for value changes
  registerOnChange(fn: (value: string) => void): void {
    this.onChange = fn;
  }

  // Required: Accept the Angular callback for touch events
  registerOnTouched(fn: () => void): void {
    this.onTouched = fn;
  }

  // Required: Handle external value updates from the parent form
  writeValue(value: string): void {
    console.log(`writeValue() ${value}`);
    // Sync the external value to your component's internal state
    this.value = value;
  }

  // Optional: Handle disabled state if your component needs it
  setDisabledState(isDisabled: boolean): void {
    // Add logic here (e.g., disable template inputs, update UI state)
  }
}

Why Your Original Code Wasn't Working #

1. Missing registerOnChange: Without this method, Angular couldn't pass its callback to your component. When you called this.onChange, you were just running your default placeholder function—not actually updating the parent form.
2. writeValue wasn't implemented: Even if the parent form changed, your component had no code to receive that new value and update its internal state.
3. Misunderstanding method flow: writeValue won't trigger when you call this.onChange—that's not its job. writeValue is for external → internal updates, while this.onChange handles internal → external updates.

How to Test It #

• To trigger writeValue: In your parent component, update the form control's value (e.g., yourFormControl.setValue('test-image.jpg')). You should see the writeValue() console log fire.
• To test the internal → external flow: Call this.setValue('new-value') inside your ImageHandlerComponent. Check if the parent form control's value updates—it should now that registerOnChange is properly wired up.

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