Angular 自訂表單控制項

1. 建立要自訂為表單控制項的元件

2. 自訂一個包含 NG_VALUE_ACCESSOR 的 provider

此步驟會告訴 Angular 核心我們所使用的 Component 可以被視為一個擴充的表單控制項

3. 實作 ControlValueAccessor

• writeValue(obj: any): void => 當資料從元件外部被變更時所呼叫的方法
• registerOnChange(fn: any): void => 當控件的值更改時呼叫
• registerOnTouched(fn: any): void => 同 registerOnChange，只不過是在狀態變更為 touched 時呼叫
• setDisabledState(isDisabled: boolean)?: void => 當控件 disabled 狀態更更改時呼叫

結果:

可以發現我們的 component 有了表單控制項的屬性。

範例程式:

參考資料:

https://angular.io/api/forms/ControlValueAccessor

https://ithelp.ithome.com.tw/articles/10204510