Angular子窗體控件/組值和錯誤冒泡至父級

Question

我的要求 ：單個FormControl必須包含多個輸入的答案（ 多個子FormControls或FormGroups ）。

這是因為多個控件必須送入頂級（父）FormControl，並且父級FormControl的值必須經過過濾/操作以適合所需的格式。

一個很好的例子是電話輸入拆分，其中國家（地區）代碼下拉列表 ， 電話號碼輸入和分機輸入 ，所有這些都彼此分開，但是一起在一個FormGroup中。 隨着任何這些輸入值的更改，父級FormControl值也必須更改。

除了冒泡的值外，子控件的錯誤也必須冒泡到父FormControl。

現在，我讓父FormControl監聽具有國家代碼，電話號碼和分機號輸入的FormGroup的值更改。 然后，在組件上使用ControlValueAccessor，當FormGroup ValueChanges時寫入父FormControl的值。

我需要一種方法來實現所需的結果，但也需要一種方法來執行更復雜的控件和FormGroups。 考慮多個級別的嵌套FormControls和/或FormGroups。

環境

• 角度7
• 材料7
• NGRX 6

Answer 1

最初，我們試圖提供一個很好的解決方案來處理將巨大的表單分解為子表單（子組件...）的過程，我們想出了一個解決方案，但也可以訪問嵌套錯誤。

我們已經為該https://github.com/cloudnc/ngx-sub-form構建了一個庫，該庫將為您提供更多的訪問嵌套錯誤的方法，您可以在此處查看官方演示： https：// cloudnc。 github.io/ngx-sub-form/listings/new （編輯表單，查看顯示的錯誤）

我也在這里https://stackoverflow.com/a/56375605/2398593回答了一個類似的SO問題，並在這里為該問題構建了一個演示（也展示了嵌套錯誤功能） https://stackblitz.com/edit / SO-問題-角-2-大規模應用-表單的處理

希望能幫助到你！

編輯：

如果您想走得更遠，我剛剛在這里發布了一篇博客文章，以解釋有關表單和ngx-sub-form的許多內容，網址為https://dev.to/maxime1992/building-scalable-robust-and-type-安全表單與-角3nf9