{ "id": "api/forms/ControlValueAccessor", "title": "ControlValueAccessor", "contents": "\n\n
\n
\n
\n \n API > @angular/forms\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

ControlValueAccessorlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

Defines an interface that acts as a bridge between the Angular forms API and a\nnative element in the DOM.

\n\n

See more...

\n
\n \n \n
\n\ninterface ControlValueAccessor {\n writeValue(obj: any): void\n registerOnChange(fn: any): void\n registerOnTouched(fn: any): void\n setDisabledState(isDisabled: boolean)?: void\n}\n\n\n \n \n\n\n \n \n
\n

Class implementationslink

\n \n\n\n\n\n
\n \n\n
\n\n \n
\n

See alsolink

\n
    \n \n

  • DefaultValueAccessor

    \n
    • \n
\n
\n\n\n \n \n
\n

Descriptionlink

\n

Implement this interface to create a custom form control directive\nthat integrates with Angular forms.

\n\n \n
\n\n \n\n \n\n
\n

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n
\n
\n

\n writeValue()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Writes a new value to the element.

\n\n
\n
\n \n\n writeValue(obj: any): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n obj\n any\n

The new value for the element

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n

This method is called by the forms API to write to the view when programmatic\nchanges from model to view are requested.

\n\n
\n

Usage Noteslink

\n
Write a value to the elementlink
\n

The following example writes a value to the native DOM element.

\n\nwriteValue(value: any): void {\n this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);\n}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n
\n
\n

\n registerOnChange()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Registers a callback function that is called when the control's value\nchanges in the UI.

\n\n
\n
\n \n\n registerOnChange(fn: any): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n fn\n any\n

The callback function to register

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n

This method is called by the forms API on initialization to update the form\nmodel when values propagate from the view to the model.

\n

When implementing the registerOnChange method in your own value accessor,\nsave the given function so your class calls it at the appropriate time.

\n\n
\n

Usage Noteslink

\n
Store the change functionlink
\n

The following example stores the provided function as an internal method.

\n\nregisterOnChange(fn: (_: any) => void): void {\n this._onChange = fn;\n}\n\n

When the value changes in the UI, call the registered\nfunction to allow the forms API to update itself:

\n\nhost: {\n '(change)': '_onChange($event.target.value)'\n}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n \n \n\n \n \n \n \n
\n
\n

\n registerOnTouched()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Registers a callback function that is called by the forms API on initialization\nto update the form model on blur.

\n\n
\n
\n \n\n registerOnTouched(fn: any): void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n fn\n any\n

The callback function to register

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n

When implementing registerOnTouched in your own value accessor, save the given\nfunction so your class calls it when the control should be considered\nblurred or \"touched\".

\n\n
\n

Usage Noteslink

\n
Store the callback functionlink
\n

The following example stores the provided function as an internal method.

\n\nregisterOnTouched(fn: any): void {\n this._onTouched = fn;\n}\n\n

On blur (or equivalent), your class should call the registered function to allow\nthe forms API to update itself:

\n\nhost: {\n '(blur)': '_onTouched()'\n}\n\n\n
\n\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n \n \n
\n
\n

\n setDisabledState()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Function that is called by the forms API when the control status changes to\nor from 'DISABLED'. Depending on the status, it enables or disables the\nappropriate DOM element.

\n\n
\n
\n \n\n setDisabledState(isDisabled: boolean)?: void\n\n \n\n
Parameters
\n \n \n \n \n \n \n \n \n \n
\n \n isDisabled\n boolean\n

The disabled status to set on the element

\n\n
\n\n \n
Returns
\n

void

\n\n \n\n\n \n\n \n
\n
\n

Usage Noteslink

\n

The following is an example of writing the disabled property to a native DOM element:

\n\nsetDisabledState(isDisabled: boolean): void {\n this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);\n}\n\n\n
\n\n \n
\n\n\n \n\n\n
\n
\n\n\n" }