Custom Control 與 form 的互動

我的code 在這裡
我的custom control 不能form.valid 的value。
當我將division 這個field 清空之後,可以看到dirty attribute 已經轉了做true,
但是valid 這個attribute不轉動,請問如何解決呢?

因為你還要多實作一個 Validator 的介面,我有改一個範例程式

  1. ControlValueAccessor 只處理資料相關,驗證的部分他不管
  2. 驗證的工作是落在 Validator 上

跟我網上找到的solution 一樣,正想找你confirm 一下。
其實用open source 東西,好多時都google 到solution,
只是不知那個work,也不知道那一個才是"正統"。

不過你的solution 使我學到不用自己寫 validator,
只需傳回built-in validator的validation result 給form 就可以了,
這一招暫時是我未見過/未找到相關的solution.

謝謝

1個讚

請問如果我要validate 一個object list, 要怎樣做呢?
我試了兩天都不知怎麼辦,煩請各位大大指點迷津。
source code 就在這裡.

什麼意思,你想要驗證什麼東西?

之前你用viewchild那一招取得form control,
現在我的form control是dynamic生成的,那麼我該如何取得這樣的form control呢?

如果是一個清單,你可以用 FormGroup 的角度去看, Formgroup 也有自己的驗證狀態

照你這樣說是不是一張form 裡面可以很多個form group, 而一個form group 裡面有很多個form control 呢?

我搞不清楚它們的關係

當然可以,但是出來的資料結構也會不一樣,最後送出前在整理一下資料結構,應該不是太困難的事情

讀一下官方文件
https://angular.io/guide/reactive-forms

不知道你意思是不是這樣,
但是不知為何ggGroup.valid常常return true,而且又不會影響到templateForm.valid的值。
我是參考這個web page 的,這個web page 說template driven form 也可以用form group 的。

我寫了一個 demo ,你看看對你有沒有幫助

謝謝Kevin 大大提供reactive form solution.

我參考以下的網頁:

試了兩天,幸運地得出template driven form solution:

簡化version 的source code

比較復雜的version的source code

這兩個version 的分別是:

簡化version:

<app-manualList 
  [manuals]="this.manuals">
</app-manualList>

比較復雜的version:

<app-manualList 
 name="manuals"
 [(ngModel)]="this.manuals">
</app-manualList>

我只知其然,而不知其所以然。
是不是"比較復雜的version"的做法比較正統一點呢?

這兩者其實沒什麼差,只差在一個是透過 Input 取直,一個是透過 NgModel,但其重點還是在於 ControlContainer, 這一個省掉很多自己需要實作的功能,但缺點是,功能的封裝程度,如果是使用 ControlContainer,某種層面上只是將 html 的部分抽離而已

ControlContainer 的文件說明

A base class for directives that contain multiple registered instances of NgControl . Only used by the forms module.

但如果你是想要一個很完整的 Custom FormControl, 那就要乖乖的一個功能一個功能的刻