Class CustomControl

packages/forms/signals/test/web/interop.spec.ts:60–106

describe('ControlValueAccessor', () => {
  @Component({
    selector: 'custom-control',
    template: `
      <input
        [value]="value"
        [disabled]="disabled"
        (blur)="onBlur()"
        (input)="onInput($event.target.value)"
      />
    `,
    providers: [{provide: NG_VALUE_ACCESSOR, useExisting: CustomControl, multi: true}],
    changeDetection: ChangeDetectionStrategy.Eager,
  })
  class CustomControl implements ControlValueAccessor {
    value = '';
    writeCount = 0;
    disabled = false;

    private onChangeFn?: (value: string) => void;
    private onTouchedFn?: () => void;

    writeValue(newValue: string): void {
      this.value = newValue;
      this.writeCount++;
    }

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

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

    setDisabledState(disabled: boolean): void {
      this.disabled = disabled;
    }

    onBlur() {
      this.onTouchedFn?.();
    }

    onInput(newValue: string) {
      this.value = newValue;
      this.onChangeFn?.(newValue);
    }
  }

  @Directive({
    selector: '[cvaDir]',