填写这份《一分钟调查》，帮我们（开发组）做得更好！去填写Home
API 参考手册
API > @angular/forms

ControlValueAccessor

定义一个接口，该接口充当 Angular 表单 API 和 DOM 中的原生元素之间的桥梁。

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

说明

实现此接口以创建与 Angular 表单集成的自定义表单控件指令。

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
参数
obj any

元素的新值

The new value for the element

返回值

void

当请求从模型到视图的编程更改时，表单 API 会调用此方法以写入视图。

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

以下示例将一个值写入原生 DOM 元素。

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

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

registerOnChange()

注册一个回调函数，该控件的值在 UI 中更改时将调用该回调函数。

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

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

要注册的回调函数

The callback function to register

返回值

void

当值从视图传播到模型时，表单 API 会在初始化时调用此方法以更新表单模型。

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

在你自己的值访问器中实现 registerOnChange 方法时，请保存给定的函数，以便你的类在适当的时机调用它。

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;
}

当用户界面中的值更改时，请调用已注册的函数以允许表单 API 自行更新：

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)'
}

registerOnTouched()

注册一个在初始化时由表单 API 调用的回调函数，以在失焦时更新表单模型。

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

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

要注册的回调函数

The callback function to register

返回值

void

在你自己的值访问器中实现 registerOnTouched ，请保存给定函数，以便你的类在应将控件视为失焦或“已接触过”时调用它。

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;
}

在 blur（或等效事件）时，你的类应调用已注册的函数以允许表单 API 自行更新：

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

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

setDisabledState()

当控件状态更改为 “DISABLED” 或从 “DISABLED” 更改时，表单 API 要调用的函数。根据其状态，它会启用或禁用适当的 DOM 元素。

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
参数
isDisabled boolean

要在元素上设置的禁用状态

The disabled status to set on the element

返回值

void

使用说明

以下是将 disabled 属性写入原生 DOM 元素的示例：

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);
}