iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use Angular’s default value accessor for a custom element that behaves like a plain text input; implement ControlValueAccessor when the control has its own value behavior, needs processing, or combines multiple interactive elements. It is the bridge between Angular Forms and the control—not, by itself, the full integration contract for an Angular Material form field.
Choose the right value-accessor approach
Reactive and template-driven forms both track changes between what a user interacts with and the form data in the component model, as Angular explains in its Forms overview. The right integration depends on how the custom control behaves.
| Approach | Use it when | What it handles |
|---|---|---|
ngDefaultControl |
The custom element behaves like a standard text field and needs no special value processing. | Attaches Angular’s default value accessor to the element. See Angular’s DefaultValueAccessor documentation. |
Dedicated ControlValueAccessor |
The control parses or transforms values, has a non-text value model, or coordinates multiple interactive elements. | Defines how values, touched state, and disabled state move between Angular Forms and the custom control. See the ControlValueAccessor API. |
Do not implement a dedicated accessor just because an element is custom. Conversely, do not use the default accessor if the control’s value semantics or interaction require logic that a text-like input does not.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →What ControlValueAccessor does
Angular defines ControlValueAccessor as an interface bridging the Forms API and a native DOM element. A component implementing it supplies four methods: writeValue, registerOnChange, registerOnTouched, and the optional setDisabledState.
#1 Best Overall
writeValue(value)carries a programmatic form-model change into the control’s view.registerOnChange(fn)gives the control a callback to report user-originated value changes to Angular Forms.registerOnTouched(fn)gives the control a callback to report that it has reached its meaningful touched or blur boundary.setDisabledState(isDisabled)carries the form control’s disabled status into the UI.
These directions are distinct: writeValue is a model-to-view update, while the registered change callback is for UI-to-model updates. A model write should update the control’s displayed or internal value without being reported back as a fresh user edit.
Implement the value and state flow
Write model values into the view
In writeValue, update the component’s internal value and whatever the user sees. Handle the value shape your control supports, including any appropriate empty or initial state. Do not call the saved change callback merely because Angular invoked writeValue; that would confuse a form-model update with a user edit.
Report user edits to Angular
In registerOnChange, save the supplied function. When an actual UI interaction changes the value, update the component state and invoke that saved function with the new value. Angular’s API example shows the accessor callbacks as the connection between the UI and forms.
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Report touch at the meaningful boundary
Save the callback from registerOnTouched, then call it when the control should count as touched—commonly when focus leaves the control. Angular’s API example wires this callback to a blur event. For a composite control, choose a boundary that reflects the whole control rather than marking it touched every time focus moves between its internal elements.
Rank #3
Propagate disabled state
Implement setDisabledState so a form’s disabled status reaches the element or elements users can operate. In a composite control, apply the state consistently to every interactive part; otherwise some actions may remain available while the form considers the control disabled.
Provide the accessor to Angular Forms
Angular uses the NG_VALUE_ACCESSOR injection token to provide a value accessor for a form control. The NG_VALUE_ACCESSOR API documents the token. A custom component must make its accessor available through the project’s Angular provider setup for the forms binding to use it; follow the syntax and patterns supported by the Angular version installed in the project.
Angular Material form fields require more than an accessor
ControlValueAccessor provides the Forms bridge, but it does not automatically make a component behave as a complete Angular Material form-field control. The Angular Components custom form-field guide describes additional integration, including working with formControl and ngModel, connecting to the associated NgControl, and reflecting hint and error IDs in aria-describedby so assistive technology can receive those descriptions.
Free tools Windows power users keep installed
One-click scans. No signup required.
The guide also discusses a possible cyclic dependency when a control both provides an accessor and assigns the associated NgControl directly. Because implementation details can change, check the guide for the Angular Material version installed in the project rather than copying version-sensitive code from another release. If the component is not used as a Material form-field control, these Material-specific requirements do not apply simply because it implements an accessor.
Review the integration before relying on it
Test the control with the forms API and UI it is intended to support. A useful implementation review checks distinct paths rather than only whether the initial value appears:
- Changing the form model updates the control through
writeValue. - Editing the control updates the form model through the registered change callback.
- Leaving or otherwise completing interaction marks the control touched at the intended boundary.
- Disabling and re-enabling the form control consistently affects all interactive parts.
- The control works with its intended reactive or template-driven binding; if it is a Material form-field control, its Material integration and accessibility descriptions also work.
Angular’s documentation establishes the accessor contract, but it does not prescribe this list as a complete test suite. Adapt the checks to the control’s behavior and the Angular and Material versions in the application.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitches
