ControlValueAccessor 是什么？為什么需要使用 ？下面本篇文章就來帶大家了解Angular中的ControlValueAccessor組件接口，希望對(duì)大家有所幫助！

ControlValueAccessor 是什么？

簡單來說ControlValueAccessor是一個(gè)接口，它被用于在 Angular 的 FormControl 實(shí)例和原生 DOM 元素之間創(chuàng)建一個(gè)橋梁。其使用方式和OnInit類似，需要程序員在自定義組件里面實(shí)現(xiàn)相應(yīng)的方法。

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';  @Component({     selector: 'custom',     templateUrl: './custom.component.html',     styleUrls: ['./custom.component.less'],     providers: [            {         provide: NG_VALUE_ACCESSOR,          useExisting: forwardRef(() => CustomComponent),         multi: true            }        ] }) export class CustomComponent implements ControlValueAccessor, OnInit, {…

為什么需要使用 ControlValueAccessor

有時(shí)，你可能需要?jiǎng)?chuàng)建自定義的表單元素，并希望它能和Angular的FormControl成功通信。這時(shí)你便需要ControlValueAccessor來實(shí)現(xiàn)這個(gè)目的。

比如：

this.myForm = new FormGroup({     userName: new FormControl({value: '', disabled: false}) });

<form [formGroup]="myForm" (ngSubmit)="onSubmit()">     <div class="form-group">         <label>             Name:             <my-input formControlName="userName"></my-input>         </label>     </div>     <div class="form-group">         <button type="submit">Submit</button>     </div> </form>

深入理解

ControlValueAccessor的使用方法在Angular官網(wǎng)和很多的文章中都有介紹，但是它具體是如何起作用的呢？

Angular 需要一種通用機(jī)制來橋接原生/自定義表單控件和 formControl 指令，而這正是 ControlValueAccessor 干的事情。這個(gè)對(duì)象橋接原生表單控件和 formControl 指令，并同步兩者的值。任何一個(gè)組件或指令都可以通過實(shí)現(xiàn) ControlValueAccessor 接口并注冊(cè)為 NG_VALUE_ACCESSOR，從而轉(zhuǎn)變成 ControlValueAccessor 類型的對(duì)象。

其實(shí)原生表單控件也擁有類似于ControlValueAccessor的接口，比如：當(dāng) Angular 在組件模板中中遇到 input 或 textarea DOM 原生控件時(shí)，就會(huì)使用DefaultValueAccessor 指令

以上是Angular 為所有原生 DOM 表單元素創(chuàng)建的 Angular 表單控件，即內(nèi)置ControlValueAccessor

ControlValueAccessor 接口定義了四個(gè)方法：

• – writeValue(obj：any)：將表單模型中的新值寫入視圖或DOM屬性（如果需要）的方法，它將來自外部的數(shù)據(jù)寫入到內(nèi)部的數(shù)據(jù)模型。

• – registerOnChange(fn：any)：一種注冊(cè)處理程序的方法，當(dāng)視圖中的某些內(nèi)容發(fā)生更改時(shí)應(yīng)調(diào)用該處理程序。它具有一個(gè)告訴其他表單指令和表單控件以更新其值的函數(shù)。通常在 registerOnChange 中需要保存該事件觸發(fā)函數(shù)，在數(shù)據(jù)改變的時(shí)候，可以通過調(diào)用事件觸發(fā)函數(shù)通知外部數(shù)據(jù)變了，同時(shí)可以將修改后的數(shù)據(jù)作為參數(shù)傳遞出去。

• – registerOnTouched(fn: any)：注冊(cè) onTouched 事件，基本同 registerOnChange ，只是該函數(shù)用于通知表單組件已經(jīng)處于 touched 狀態(tài)，改變綁定的 FormControl 的內(nèi)部狀態(tài)。

• – setDisabledState(isDisabled: boolean)：當(dāng)調(diào)用 FormControl 變更狀態(tài)的 API 時(shí)得表單狀態(tài)變?yōu)?Disabled 時(shí)調(diào)用 setDisabledState() 方法，以通知自定義表單組件當(dāng)前表單的讀寫狀態(tài)。

formControl 指令使用 writeValue 方法設(shè)置原生表單控件的值；使用 registerOnChange 方法來注冊(cè)由每次原生表單控件值更新時(shí)觸發(fā)的回調(diào)函數(shù)，我們需要把更新的值傳給這個(gè)回調(diào)函數(shù)，這樣對(duì)應(yīng)的 Angular 表單控件值也會(huì)更新；使用 registerOnTouched 方法來注冊(cè)用戶和控件交互時(shí)觸發(fā)的回調(diào)。

formControl會(huì)調(diào)用名為setUpControl的函數(shù)，ControlValueAccessor的實(shí)例valueAccessor會(huì)被作為參數(shù)傳入這個(gè)函數(shù)中。在setUpControl中，ControlValueAccessor的四個(gè)方法會(huì)在交互時(shí)被調(diào)用，以完成formControl和元素之間的通信。

拓展：

在使用ControlValueAccessor時(shí)需要一同引入NG_VALUE_ACCESSOR，它是使用InjectionToken 創(chuàng)建的可在 Provider 中使用的 Token。我們?cè)诰帉懽约旱捻?xiàng)目時(shí)一般不需要用到InjectionToken，但是在一個(gè)框架或者第三方的插件中，它就變得十分有必要了。

export const NG_VALUE_ACCESSOR =     new InjectionToken<ReadonlyArray<ControlValueAccessor>>('NgValueAccessor');

試想當(dāng)我使用依賴注入的功能時(shí)，我需要將我創(chuàng)建的依賴注冊(cè)進(jìn)組件中。這時(shí)我就需要一個(gè)令牌，如果我使用一個(gè)字符串作為令牌就有可能會(huì)造成重復(fù)，相同的令牌會(huì)導(dǎo)致后面的覆蓋前面的。所以需要一個(gè)Token作為一個(gè)唯一值來防止這種沖突。

providers: [{ provide: TOKEN, useValue: … }]