API 参考手册
API > @angular/forms

ControlValueAccessor

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

查看"说明"...

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

实现类

参见

  • DefaultValueAccessor

说明

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

方法

writeValue()

Writes a new value to the element.

writeValue(obj: any): void
      
      writeValue(obj: any): void
参数
obj any

The new value for the element

返回值

void

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

使用说明

Write a value to the element

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

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

registerOnChange()

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

registerOnChange(fn: any): void
      
      registerOnChange(fn: any): void
参数
fn any

The callback function to register

返回值

void

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

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

使用说明

Store the change function

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

registerOnChange(fn: (_: any) => void): void { this._onChange = fn; }
      
      registerOnChange(fn: (_: any) => void): void {
  this._onChange = fn;
}

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

host: { (change): '_onChange($event.target.value)' }
      
      host: {
   (change): '_onChange($event.target.value)'
}

registerOnTouched()

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

registerOnTouched(fn: any): void
      
      registerOnTouched(fn: any): void
参数
fn any

The callback function to register

返回值

void

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

使用说明

Store the callback function

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

registerOnTouched(fn: any): void { this._onTouched = fn; }
      
      registerOnTouched(fn: any): void {
  this._onTouched = fn;
}

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

host: { '(blur)': '_onTouched()' }
      
      host: {
   '(blur)': '_onTouched()'
}

setDisabledState()

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

setDisabledState(isDisabled: boolean)?: void
      
      setDisabledState(isDisabled: boolean)?: void
参数
isDisabled boolean

The disabled status to set on the element

返回值

void

使用说明

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

setDisabledState(isDisabled: boolean): void { this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled); }
      
      setDisabledState(isDisabled: boolean): void {
  this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);
}