What is Control Value Accessor and why implement it?

Control Value Accessor (CVA) is an interface in Angular that allows creating custom form components that can integrate with the Angular Forms API.

Why implement CVA:

• To enable your custom component to work with forms just like standard elements (input, select, etc.)
• To ensure two-way binding between the form and the component
• To allow Angular Forms to manage the component's value, state, and validation

Example: if you create your own date picker component and implement CVA, you can use it with FormControl and automatically receive updates to the form's value and status.

Sample code (simplified):

@Component({ selector: 'my-date-picker', ... })
export class MyDatePicker implements ControlValueAccessor {
  private onChange = (value: any) => {};
  private onTouched = () => {};

  writeValue(value: any) { /* update internal state */ }
  registerOnChange(fn: any) { this.onChange = fn; }
  registerOnTouched(fn: any) { this.onTouched = fn; }
  setDisabledState?(isDisabled: boolean) { /* handle disable */ }

  // Call onChange when the value changes inside the component
}