Angular之ControlValueAccessor接口怎么使用

這篇文章主要講解了“Angular之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: … }]

感謝各位的閱讀，以上就是“Angular之ControlValueAccessor接口怎么使用”的內容了，經過本文的學習后，相信大家對Angular之ControlValueAccessor接口怎么使用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！