How do you build a custom form control by implementing the ControlValueAccessor interface?

Q: How do you build a custom form control by implementing the ControlValueAccessor interface?

**Target Audience:** Developers comfortable with reactive forms who need a custom widget to act like a native input. **Difficulty:** Medium to Hard > **How to read this doc:** Plain language first, then 📌 Interview term: callouts. The call orders in sections 5 and 6 were logged by the components themselves on Angular 22.2.3, compiled with ngc in strict mode and booted in jsdom; the runnable example printed the same lines in playground mode. ## 1. Why This Even Matters — A Story First A travel adapter lets a British plug go into an Italian socket. The socket does not know or care what is plugged in; it only needs pins in the right places. The plug does not know which country it is in; it only needs something to hold its prongs. Angular forms work the same way. The form directives ( formControl , formControlName , ngModel ) are the socket. Your star rating is a plug with a very unusual shape: five buttons, no value</

The problem

Question presented to candidate: "Design wants a five-star rating widget that behaves like a normal input inside our reactive forms: it should take a value from the FormControl, report changes, mark the control touched, and respect disable(). How do you build it with ControlValueAccessor?"

What a strong answer should cover:

ControlValueAccessor (CVA) is the adapter interface between a forms directive (formControl, formControlName, ngModel) and any UI element.
The four methods and their direction: writeValue (model to view), registerOnChange and registerOnTouched (store callbacks for view to model), optional setDisabledState.
Register it with { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StarRating), multi: true }.
Call the stored onChange only for user changes, never inside writeValue; call onTouched on blur.
Know the call order: reactive directives call writeValue first, then setDisabledState (always, since v15's default), then the register methods; ngModel first writes null, then the real value a tick later.
Handle null (from reset()), and keep internal state in signals so the OnPush view updates. Bonus: Angular 22 can also drive a CVA-free model()-based control.

Clarifying questions expected:

"Should the widget support keyboard input and be focusable for accessibility?"
"What should the value be when the form is reset: 0 or null?"

Code / implementation expected: Yes — a working CVA component used with a FormControl, ideally logging when each method is called.

forms
custom-control

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Developers comfortable with reactive forms who need a custom widget to act like a native input. Difficulty: Medium to Hard

How to read this doc: Plain language first, then 📌 Interview term: callouts. The call orders in sections 5 and 6 were logged by the components themselves on Angular 22.2.3, compiled with ngc in strict mode and booted in jsdom; the runnable example printed the same lines in playground mode.

1. Why This Even Matters — A Story First

A travel adapter lets a British plug go into an Italian socket. The socket does not know or care what is plugged in; it only needs pins in the right places. The plug does not know which country it is in; it only needs something to hold its prongs.

Angular forms work the same way. The form directives (formControl, formControlName, ngModel) are the socket. Your star rating is a plug with a very unusual sh

The solution is hidden so you can try first

9 min read · 10 sections

Read the code

AngularA star-rating ControlValueAccessor that logs every call the forms API makes

Open in playground

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

@Component({
  selector: "star-rating",
  providers: [
    // Tells the forms directives on <star-rating> which object speaks the ControlValueAccessor protocol.
    { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => StarRating), multi: true },
  ],
  template: `
    @for (star of stars; track star) {
      <button type="button" class="star" [disabled]="disabled()" (click)="pick(star)" (blur)="onTouched()">
        {{ star <= value() ? "★" : "☆" }}
      </button>
    }
  `,
})
export class StarRating implements ControlValueAccessor {
  stars = [1, 2, 3, 4, 5];
  value = signal(0);
  disabled = signal(false);
  private onChange: (value: number) => void = () => {};
  onTouched: () => void = () => {};

  // MODEL -> VIEW: the form pushes a value in. Do not call onChange here.
  writeValue(value: number | null): void {
    console.log("writeValue(" + value + ")");
    this.value.set(value ?? 0);
  }
  // VIEW -> MODEL: the form hands us a callback to call when the user changes the value.
  registerOnChange(fn: (value: number) => void): void {
    console.log("registerOnChange");
    this.onChange = fn;
  }
  registerOnTouched(fn: () => void): void {
    console.log("registerOnTouched");
    this.onTouched = fn;
  }
  setDisabledState(isDisabled: boolean): void {
    console.log("setDisabledState(" + isDisabled + ")");
    this.disabled.set(isDisabled);
  }

  pick(star: number) {
    this.value.set(star);
    this.onChange(star);
  }
}

@Component({
  selector: "app-root",
  imports: [ReactiveFormsModule, StarRating],
  template: `
    <star-rating [formControl]="rating" />
    <button id="toggle" (click)="toggle()">toggle disabled</button>
    <button id="reset" (click)="rating.setValue(2)">setValue(2)</button>
    <p id="out">value={{ value() }}</p>
  `,
})
export class AppComponent {
  rating = new FormControl(3, { validators: Validators.min(1) });
  value = signal(this.rating.value);
  constructor() {
    this.rating.valueChanges.subscribe((v) => this.value.set(v));
  }
  toggle() {
    if (this.rating.disabled) this.rating.enable();
    else this.rating.disable();
  }
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.