在 Angular 自定義表單控件，有時你想要的輸入不是標準的文本輸入、選擇或復選框。通過實現ControlValueAccessor 接口并將組件注冊為 NG_VALUE_ACCESSOR，您可以將自定義表單控件無縫地集成到模板驅動或響應表單中，就像它是本地表單一樣!
ControlValueAccessor
ControlValueAccessor 是一個接口，充當Angular API 和 DOM 元素之間的橋梁
ControlValueAccessor 是一個連接表單模型和視圖（DOM元素）的接口，自定義的表單控件必須實現這個接口，它的作用是：
Angular 引入這個接口的原因是，不同的輸入控件數據更新方式是不一樣的。例如，對于我們常用的文本輸入框來說，我們是設置它的 value 值，而對于復選框 (checkbox) 我們是設置它的 checked 屬性。實際上，不同類型的輸入控件都有一個 ControlValueAccessor，用來更新視圖
Angular 中常見的 ControlValueAccessor 有：
export interface ControlValueAccessor { writeValue(obj: any) : void registerOnChange(fn: any) : void registerOnTouched(fn: any) : void}writeValue（obj：any）是將表單模型中的值寫入視圖中。
writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'value', value);}registerOnChange（fn：any）是一個方法，用于注冊在視圖中的某些內容發生更改時應調用的處理程序。它獲取一個函數，告訴其他表單指令和表單控件更新其值。
registerOnChange(fn: (_: any) => void): void { this._onChange = fn;}registerOnTouched（fn：any）與registerOnChange()此類似，它專門為控件接收觸摸事件時注冊一個處理程序。
registerOnTouched(fn: any): void { this._onTouched = fn;}setDisabledState?(isDisabled: boolean): void; 是一個可選的方法，設置自定義表單的狀態
setDisabledState(isDisabled: boolean): void { this._renderer.setProperty(this._elementRef.nativeElement, 'disabled', isDisabled);}AbstractValueAccessor
我們可以把 ControlValueAccessor 中的方法寫在一個抽象類中，不同的組件可以實現這個基類
export abstract class AbstractValueAccessor implements ControlValueAccessor { private _value: any = ''; get value(): any { return this._value; } set value(v: any) { if (v !== this._value) { this._value = v; this.onChange(v); this.onTouched(); } } writeValue(value: any) { this._value = value; } onChange = (_) => {}; onTouched = () => {}; registerOnChange(fn: (_: any) => void): void { this.onChange = fn; } registerOnTouched(fn: () => void): void { this.onTouched = fn; }}export function MakeProvider(type: any): { provide: any, useExisting: any, multi: boolean} { return { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => type), multi: true };}Example
自定義一個 list 控件，可以選擇年級
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
