填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

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.

方法

將新值寫入元素。

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

註冊一個回呼(Callback)函式,該控制元件的值在 UI 中更改時將呼叫該回調函式。

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

      
      registerOnChange(fn: any): void
    
引數
fn any

要註冊的回呼(Callback)函式

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

註冊一個在初始化時由表單 API 呼叫的回呼(Callback)函式,以在失焦時更新表單模型。

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

要註冊的回呼(Callback)函式

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".

使用說明

儲存回呼(Callback)函式
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()'
}
    

當控制元件狀態更改為 “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);
}