這篇文章給大家介紹如何在Angular中使用ControlValueAccessor創(chuàng)建自定義表單控件，內(nèi)容非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

創(chuàng)新互聯(lián)主要從事做網(wǎng)站、網(wǎng)站設(shè)計(jì)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)南岳,十余年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18980820575

ControlValueAccessor

ControlValueAccessor 是一個(gè)接口，充當(dāng)Angular API 和 DOM 元素之間的橋梁

ControlValueAccessor 是一個(gè)連接表單模型和視圖（DOM元素）的接口，自定義的表單控件必須實(shí)現(xiàn)這個(gè)接口，它的作用是：

• 把 form 模型中值映射到視圖中

• 當(dāng)視圖發(fā)生變化時(shí)，通知 form directives 或 form controls

Angular 引入這個(gè)接口的原因是，不同的輸入控件數(shù)據(jù)更新方式是不一樣的。例如，對(duì)于我們常用的文本輸入框來(lái)說(shuō)，我們是設(shè)置它的 value 值，而對(duì)于復(fù)選框 (checkbox) 我們是設(shè)置它的 checked 屬性。實(shí)際上，不同類型的輸入控件都有一個(gè) ControlValueAccessor，用來(lái)更新視圖

Angular 中常見(jiàn)的 ControlValueAccessor 有：

• DefaultValueAccessor - 用于 text 和 textarea 類型的輸入控件

• SelectControlValueAccessor - 用于 select 選擇控件

• CheckboxControlValueAccessor - 用于 checkbox 復(fù)選控件

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）是一個(gè)方法，用于注冊(cè)在視圖中的某些內(nèi)容發(fā)生更改時(shí)應(yīng)調(diào)用的處理程序。它獲取一個(gè)函數(shù)，告訴其他表單指令和表單控件更新其值。

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

registerOnTouched（fn：any）與registerOnChange()此類似，它專門為控件接收觸摸事件時(shí)注冊(cè)一個(gè)處理程序。

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

setDisabledState?(isDisabled: boolean): void; 是一個(gè)可選的方法，設(shè)置自定義表單的狀態(tài)

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

AbstractValueAccessor

我們可以把 ControlValueAccessor 中的方法寫在一個(gè)抽象類中，不同的組件可以實(shí)現(xiàn)這個(gè)基類

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

關(guān)于如何在Angular中使用ControlValueAccessor創(chuàng)建自定義表單控件就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

文章名稱：如何在Angular中使用ControlValueAccessor創(chuàng)建自定義表單控件
網(wǎng)頁(yè)路徑：http://www.rwnh.cn/article46/jgpghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、云服務(wù)器、微信公眾號(hào)、做網(wǎng)站、全網(wǎng)營(yíng)銷推廣、域名注冊(cè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)