Custom Form Controls with ControlValueAccessor

ControlValueAccessor (CVA) lets you build a custom input component that works with Angular forms. Example custom controls: - star rating - phone input with country code - date picker wrapper ## Goal: Star rating input that works with formControlName ### Step 1: Create a rating component ```ts import { Component, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { CommonModule } from '@angular/common'; @Component({ selector: 'app-rating', standalone: true, imports: [CommonModule], providers: [ { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RatingComponent), multi: true, }, ], template: ` <div class="stars"> <button type="button" *ngFor="let s of stars" (click)="set(s)"> {{ s <= value ? '★' : '☆' }} </button> </div> `, }) export class RatingComponent implements ControlValueAccessor { stars = [1, 2, 3, 4, 5]; value = 0; disabled = false; private onChange: (v: number) => void = () => {}; private onTouched: () => void = () => {}; writeValue(v: number): void { this.value = v ?? 0; } registerOnChange(fn: (v: number) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; } setDisabledState(isDisabled: boolean): void { this.disabled = isDisabled; } set(v: number) { if (this.disabled) return; this.value = v; this.onChange(v); this.onTouched(); } } ``` ### Step 2: Use it in a reactive form ```html <form [formGroup]="form"> <app-rating formControlName="rating"></app-rating> </form> ``` Now your custom component behaves like a native input. > Next: State management options (Signals store patterns, NgRx, Akita style decisions).