讓Angular自定義組件支持form表單驗證

Angular提供了一套很是強大的表單驗證庫（vue和react都須要第三方庫的支持），能夠很是方便簡單實現web應用程序中的表單驗證功能。可是如何讓咱們自定義的組件也支持驗證呢？

我遇到一個需求是封裝WangEditor這個富文本編輯器放到表單中。

這種需求是很是常見的，Angular給咱們提供了ControlValueAccessor接口，咱們能夠很方便的實現自定義驗證功能

理解ControlValueAccessor

用官方的話來講，ControlValueAccessor是充當 Angular 表單 API 和 DOM 中的原生元素之間的橋樑

這個接口提供了四個方法

interface ControlValueAccessor {
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean)?: void
}

通常狀況下，只須要處理writeValue和registerOnChange兩個方法

writeValue是formGroup把值傳遞給自定義組件，自定義組件須要根據這個值處理對應的顯示狀態。

registerOnChange的參數是一個Function，須要在組件狀態修改的時候，調用這個Function來把組件的值傳遞給formGroup

註冊Provider使當前的接口處理生效

若是是單純的實現了這個接口，是沒法生效的。須要在模塊註冊或者組件上的Attribute中去註冊NG_VALUE_ACCESSOR值爲當前組件。

providers: [{
    provide: NG_VALUE_ACCESSOR, useExisting: QWangEditorComponent, multi: true
  }]

作完這一步後，這個組件就支持了Angular的表單驗證功能了。

在表單中，加上formControlName屬性，自定義組件的功能就能夠和formGroup中的對應屬性實現雙向綁定了，並支持表單驗證了。

最後

歡迎關注個人公衆號【青城同窗】，不定時和你分享我各類技術和非技術的東西