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

• 2021 年 7 月 25 日
• 筆記

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中的對應屬性實現雙向綁定了，並支援表單驗證了。

最後

歡迎關注我的公眾號【青城同學】，不定時和你分享我各種技術和非技術的東西