What is the role of NG_VALUE_ACCESSOR in a custom component?

import { Component, forwardRef, inject, signal } from "@angular/core";
import {
  ControlValueAccessor,
  FormControl,
  FormGroup,
  NG_VALUE_ACCESSOR,
  NgControl,
  ReactiveFormsModule,
  Validators,
} from "@angular/forms";

// Pattern A: register through the NG_VALUE_ACCESSOR multi-provider token.
@Component({
  selector: "yes-no",
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => YesNo), multi: true }],
  template: `<button type="button" class="yes-no" (click)="flip()">{{ on() ? "yes" : "no" }}</button>`,
})
export class YesNo implements ControlValueAccessor {
  on = signal(false);
  private onChange: (v: boolean) => void = () => {};
  writeValue(v: boolean | null) { this.on.set(!!v); }
  registerOnChange(fn: (v: boolean) => void) { this.onChange = fn; }
  registerOnTouched() {}
  flip() { this.on.update((x) => !x); this.onChange(this.on()); }
}

// Pattern B: no provider. Inject the NgControl on the same element and hand it this object.
// Avoids the circular dependency you get if you provide NG_VALUE_ACCESSOR AND inject NgControl,
// and gives the component direct access to the control (errors, touched...).
@Component({
  selector: "code-input",
  template: `
    <input class="code" [value]="value()" (input)="onInput($any($event.target).value)" (blur)="onTouched()" />
    @if (ngControl?.touched && ngControl?.errors) {
      <small class="code-err">{{ errorText() }}</small>
    }
  `,
})
export class CodeInput implements ControlValueAccessor {
  ngControl = inject(NgControl, { self: true, optional: true });
  value = signal("");
  private onChange: (v: string) => void = () => {};
  onTouched: () => void = () => {};

  constructor() {
    if (this.ngControl) this.ngControl.valueAccessor = this;
  }
  writeValue(v: string | null) { this.value.set(v ?? ""); }
  registerOnChange(fn: (v: string) => void) { this.onChange = fn; }
  registerOnTouched(fn: () => void) { this.onTouched = fn; }
  onInput(v: string) {
    const upper = v.toUpperCase(); // the accessor may transform the value on the way to the model
    this.value.set(upper);
    this.onChange(upper);
  }
  errorText() {
    return Object.keys(this.ngControl?.errors ?? {}).join(", ");
  }
}

@Component({
  selector: "app-root",
  imports: [ReactiveFormsModule, YesNo, CodeInput],
  template: `
    <form [formGroup]="form">
      <yes-no formControlName="agree" />
      <code-input formControlName="code" />
    </form>
    <p id="out">{{ out() }}</p>
  `,
})
export class AppComponent {
  form = new FormGroup({
    agree: new FormControl(false, { nonNullable: true, validators: Validators.requiredTrue }),
    code: new FormControl("", { nonNullable: true, validators: [Validators.required, Validators.pattern(/^[A-Z]{3}$/)] }),
  });
  out = signal(JSON.stringify(this.form.value) + " " + this.form.status);
  constructor() {
    this.form.valueChanges.subscribe((v) => this.out.set(JSON.stringify(v) + " " + this.form.status));
  }
}