Explain the concept of ControlValueAccessor in custom form components.

 In Angular, the ControlValueAccessor interface is what allows custom form components to work seamlessly with Angular forms (both reactive and template-driven).

🧠 What is ControlValueAccessor?

It’s an Angular bridge between your custom component and the Angular Forms API.

When you use a custom form component (like a date picker, dropdown, slider, etc.), Angular doesn't automatically know how to read or write its value. That’s where ControlValueAccessor comes in.

It tells Angular:

• How to write a value to the component

• How to notify Angular when the component’s value changes

• How to handle disabled state

📦 Common Built-in Examples:

• <input> and <select> already implement ControlValueAccessor

• You implement it when creating custom form controls

🔧 Key Methods in the Interface

Method	Purpose
writeValue(obj: any)	Called by Angular to set the value in the component
registerOnChange(fn: any)	Passes a function to call when the component value changes
registerOnTouched(fn: any)	Called when the component is "touched" (blur/focus)
setDisabledState?(isDisabled: boolean)	Optional method to handle disabled state

🛠️ How to Use ControlValueAccessor in a Custom Component

1. Create a custom form component

@Component({
  selector: 'app-custom-input',
  template: `<input [value]="value" (input)="onInput($event)" (blur)="onTouched()">`,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => CustomInputComponent),
      multi: true
    }
  ]
})
export class CustomInputComponent implements ControlValueAccessor {
  value: string = '';
  onChange = (_: any) => {};
  onTouched = () => {};

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

  registerOnChange(fn: any): void {
    this.onChange = fn;
  }

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

  setDisabledState?(isDisabled: boolean): void {
    // Optional: handle disabled state if needed
  }

  onInput(event: Event) {
    const newValue = (event.target as HTMLInputElement).value;
    this.value = newValue;
    this.onChange(newValue); // Notify Angular form API
  }
}

2. Use it in a reactive form

<form [formGroup]="form">
  <app-custom-input formControlName="name"></app-custom-input>
</form>

this.form = this.fb.group({
  name: ['']
});

🎯 Summary

Feature	Description
Purpose	Sync custom form control with Angular forms
Interface Name	ControlValueAccessor
Used With	NG_VALUE_ACCESSOR token
Methods Required	writeValue, registerOnChange, etc.