[Angular 進階議題] 在客製化表單控制項增加驗證(valid)結果 | 全端開發人員天梯

[giscus[bot]]

[Angular 進階議題] 在客製化表單控制項增加驗證(valid)結果 | 全端開發人員天梯

在之前的文章「讓自訂的Component可以使用ngModel的方法」我們提到可以替Component加入NG_VALUE_ACCESSOR及實作ControlValueAccessor，來讓我們的Component成為客製化的表單控制項，並能夠使用[(ngModel)]達到two way binding的效果；既然成為了表單控制項，當然就該能享有驗證(Validation)的好處，以及在表單變化時得到一些額外的class支援，讓我們在設計上能夠有彈性！今天就要來如何讓別人在使用我們的表單控制項時能夠及時得知表單的內部驗證狀態(NG_VALIDATORS和NG_ASYNC_VALIDATORS)。

https://fullstackladder.dev/blog/2017/09/23/angular-advanced-customize-form-control-with-validation/

[Landy510]

Mike 大您好，
想請教您有關內文中的 userExisting 的屬性，
在官方文件，
介紹在 template-driven form 加入 cutome validator 的範例部分，
有提到以下這一段話

以上的文字特別提醒不要在自訂義的 validator 使用 useClass 而是要使用 useExiting，
若我們使用 useClass 的話，會使得範例中的 ForbiddenValidatorDirective 創出一個不具有 forbiddenName 這個 @Input 的全新物件。
但是我的理解是 useClass 是創出一個全新的 ForbiddenValidatorDirective 物件，那應該要含有屬於它自己的 forbiddenName 的 @Input 才對。
但為什麼官網上會特別這樣註明呢?

再麻煩 Mike 大可以幫忙解惑，感謝~

[wellwind]

validator 是跟著元件一起建立的，每個元件則是在樣版上呈現時才會被建立
使用 useExisting，代表這個驗證器會使用「被建立好的元件」；如果使用 useClass，則會得到一個全新的元件，而不是原來一起被建立的那個元件，因此相關的狀態就不正確了

[Landy510]

Mike 大您好，先謝謝您的回覆，
但依照您的說法，
我還是不太能理解為什麼使用 useClass 會導致該自製的 validator directive
會取不到它自己的 @Input() forbiddenName ，
但用 useExisting 就可以的問題。

我上網查了下，有關 custom validator directive 的資料，
找到了這一篇 stackoverflow 的文章，
文章裡面的問答有提到以下這段話

For useClass, Angular will just consider ForbiddenValidatorDirective 
as a normal class and create a instance by new ForbiddenValidatorDirective() 
while @Input will be ignored here. 

不知道以上這段話的說法是否正確，因為，我看了官方文件好像沒有特別提到
用了 userClass 會導致 @Input 被忽略的說法。

希望 Mike 大可以幫忙解惑，感謝~

[wellwind]

我不太確定文件有沒有提到 useExisting 和 validator 的關係，不過

useClass 就是建立一個「新的」物件，來當作目前的 token，因此會產生兩個 directive 物件

一個是原本當 directive 掛在元素上時所產生的 directive 物件，我們先稱為「物件A」

而在元素產生時，又會因為 useClass 而再產生一個 directive 物件，我們稱為「物件B」

而實際上所有的驗證狀態、@Input設定等都應該以掛在元素上的 directive 為主，也就是「物件A」

但是在設定上卻因為 useClass 了，所以會用「物件B」的狀態，因此就不正確了！

而使用 useExisting，就只會使用當時元素因為掛上 directive 時產生的「物件A」

也因此所有的驗證狀態、@Input設定等等都會一致

翻譯成中文的話

• useClass：使用某個類別建立物件，因此遇到就會建立新的物件
• useExisting：使用某個已經建立好的物件，因此必須使用的是「已經被建立」的物件

也因此可以看到設定 useExisting: forwardRef(() => UserProfileComponent)

這就是「等 UserProfileComponent 有被建立成功後，使用它的物件參考」的意思

[Landy510]

感謝 Mike 大的回覆，有比較理解這一部分的內容了~~