Angular學習之ControlValueAccessor接口詳解

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

ControlValueAccessor 是什么？

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

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

有時，你可能需要創建自定義的表單元素，并希望它能和Angular的FormControl成功通信。這時你便需要ControlValueAccessor來實現這個目的。

比如：

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官網和很多的文章中都有介紹，但是它具體是如何起作用的呢？

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

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

以上是Angular 為所有原生 DOM 表單元素創建的 Angular 表單控件，即內置ControlValueAccessor

ControlValueAccessor 接口定義了四個方法：

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

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

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

• – setDisabledState(isDisabled: boolean)：當調用 FormControl 變更狀態的 API 時得表單狀態變為 Disabled 時調用 setDisabledState() 方法，以通知自定義表單組件當前表單的讀寫狀態。

formControl 指令使用 writeValue 方法設置原生表單控件的值；使用 registerOnChange 方法來注冊由每次原生表單控件值更新時觸發的回調函數，我們需要把更新的值傳給這個回調函數，這樣對應的 Angular 表單控件值也會更新；使用 registerOnTouched 方法來注冊用戶和控件交互時觸發的回調。

formControl會調用名為setUpControl的函數，ControlValueAccessor的實例valueAccessor會被作為參數傳入這個函數中。在setUpControl中，ControlValueAccessor的四個方法會在交互時被調用，以完成formControl和元素之間的通信。

拓展：

在使用ControlValueAccessor時需要一同引入NG_VALUE_ACCESSOR，它是使用InjectionToken 創建的可在 Provider 中使用的 Token。我們在編寫自己的項目時一般不需要用到InjectionToken，但是在一個框架或者第三方的插件中，它就變得十分有必要了。

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

試想當我使用依賴注入的功能時，我需要將我創建的依賴注冊進組件中。這時我就需要一個令牌，如果我使用一個字符串作為令牌就有可能會造成重復，相同的令牌會導致后面的覆蓋前面的。所以需要一個Token作為一個唯一值來防止這種沖突。

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