有關創建嵌套和可重用窗體的深入教程 ， 通過使用復合控制值訪問器實現完全可靠性。

　　在本教程中，您將學習如何創建和使用窗體組。我們還將學習如何通過使用復合控制值訪問器來實現完全的可靠性。

　　介紹

　　在Web應用程序中，我們可以有大型表單，如帳戶注冊表單，個人資料創建表單，信用卡表單，地址表單等。這些大型表單通常具有一組在其中重復的字段。

　　例如，地址字段通常在所有注冊表單中都可用。在本教程中，我們將學習如何將此類字段包裝在可重用表單中，以便它們可以用作任何其他表單中的嵌套表單。

　　在本教程中，我們將討論創建表單的 4 種方法，我們還將介紹每種方法的優缺點：

　　如何創建和使用表單組

　　如何創建嵌套表單組

　　如何將子組件與嵌套窗體組一起使用

　　如何使用復合創建可重用表單ControlValueAccessor

　　如何創建和使用表單組

　　窗體通常包含多個相關的控件。反應式窗體提供了兩種將多個相關控件分組到單個輸入窗體中的方法：和 。在本教程中，我們將重點介紹 .FormGroupFormArrayFormGroup

　　正如窗體控件實例允許您控制單個輸入字段一樣，窗體組實例跟蹤一組窗體控件實例(例如，窗體)的窗體狀態。創建窗體組時，將按名稱跟蹤窗體組實例中的每個控件。

　　我們將以“個人資料”表單為例，其中包含姓名、電子郵件、地址行、城市、州、郵政編碼和國家/地區的輸入字段。

　　相同的窗體組如下所示：

　　請注意，我們還利用了 Angular 14 中引入的嚴格類型化表單功能。

　　在上面的代碼中，我們只是創建了 一個，所有字段都為 .HTML 模板代碼可能如下所示：FormGroup FormControl

　　指令提供的輸入將每個單獨的輸入綁定到 中定義的窗體控件。窗體控件與其各自的元素進行通信。它們還將更改傳達給表單組實例，該實例為模型值提供事實來源。formControlNameFormControlNameFormGroup

　　優點

　　簡單明了的模板和表單組

　　缺點

　　難以創建和維護復雜的表單模型

　　字段集之間缺少邏輯隔離

　　如何創建嵌套表單組

　　在構建復雜表單時，在較小的部分中管理不同的信息區域會更容易。使用嵌套表單組實例可以將大型表單組分解為更小、更易于管理的表單組。

　　讓我們對嵌套組中的相關字段進行分組尋址：

　　請注意，現在在地址中，相關字段按 元素分組。我們還創建了一個類型，以獲得更好的類型安全性，并在 IDE 中更好地自動完成。讓我們在模板中對嵌套表單進行分組：profile Form address AddressForm

　　我們添加了 該指令以指示子窗體控件是窗體組的一部分。formGroupNameaddress

　　優點

　　易于創建和維護復雜的表單模型

　　字段集之間存在邏輯隔離

　　缺點

　　由于字段更多且表單復雜，模板更大

　　如何將子組件與嵌套窗體組一起使用

　　在上一節中，我們在類中實現了邏輯分離，但模板仍然很復雜。我們將創建另一個組件來處理模板復雜性。

　　我們創建了 .它有一個名為 的輸入屬性，父組件可以通過它傳遞表單組。我們來看看模板：AddressForm Component formGroup

　　該模板非常簡單，它只有與地址相關的字段。以下是我們如何在父組件中使用它：

　　在類中，我們將獲得如下所示的地址表單組：

　　優點

　　更簡單的模板 a.現在，使用這種方法，我們可以處理與 地址相關的所有內容，以便我們的主要組件更易于處理。AddressFormComponent

　　缺點

　　不能完全重復使用。如果要將此組件用作獨立的表單組件，則目前無法實現。

　　如何使用復合創建可重用表單ControlValueAccessor

　　在上一節中，我們創建了一個組件，并將地址表單的模板移動到其中。但是，它仍然不能完全重新啟動。通過完全可重用，我的意思是：

　　邏輯、錯誤處理和地址表單創建應該是地址組件的一部分，而不是父組件。

　　該組件應可在任何窗體中使用。

　　該組件應可用于模板驅動和反應式表單。

　　該組件應支持本機窗體控件功能，以便父組件或使用者組件可以利用此功能，例如，如果整個地址窗體無效，則顯示錯誤。

　　在本節中，我們將學習如何創建一個完全可重用的表單，該表單既可以用作其他表單內部，也可以用作獨立表單。我們將要使用的技術稱為“復合控制值訪問器”，由卡拉·埃里克森在2017年角度連接中引用。

　　我們的目標是使用如下所示的地址表單：

　　控制值訪問器

　　充當角度表單 API 和 DOM 中的本機元素之間的橋梁。任何組件或指令都可以通過實現接口并將自身注冊為提供程序來轉換為窗體控件。ControlValueAccessorControlValueAccessorNG_VALUE_ACCESSOR

　　其中，該接口定義了兩個重要方法 — 和 。writeValueregisterOnChange

　　窗體控件使用寫值方法將值設置為本機窗體控件。表單控件使用寄存器OnChange方法注冊每次更新本機表單控件時都應觸發的回調。您有責任將更新的值傳遞給此回調，以便更新各個 Angular 窗體控件的值。方法用于指示用戶與控件進行了交互。

　　下圖顯示了交互：

　　從 在實現控制值時再也不要混淆以角度形式訪問 - 深入的角度

　　復合控制值訪問器

　　在之前的文章和教程中，我們看到了 with one 的用法。但是，使用的優點是，如果需要，您可以獲得更多輸入。Control Value Accessor input Control ValueAccessor

　　我們只需要處理該接口的所有4個必需方法，它就會正常工作，無論我們在內部如何處理它。

　　可重復使用的表單

　　上一節中的一件事是明確的，我們希望使用相同的模板，并且在內部，我們將使用表單組管理字段的狀態，因此我們的模板將如下所示：

　　為了管理地址對象，我們將創建一個類。這將在上述模板的類的后期階段使用：

　　我們將上面的類作為表單的值。就像 、 和 一樣，我們也可以將對象存儲在窗體控件中。您可以在有關在窗體控件中管理對象的教程中閱讀有關它的更多信息。Address string number boolean

　　對于驗證，您可以有自己的邏輯來驗證地址，但現在我們將保持簡單。我們將在實現驗證時使用它。

　　接下來，根據前面有關 的文章，我們將從實現接口和 as 提供程序開始：ControlValueAccessorControlValueAccessorNG_VALUE_ACCESSOR

　　寫入值

　　在這里，我們將首先轉換進入實例的值，然后調用并將更新所有字段，其中的值將被更新。Addressform.patchValue

　　注冊更改

　　我們使用可觀察量來處理 。 所有子窗體字段的可觀察發射，因此它非常適合 。valueChangesregisterOnChangevalueChangesregisterOnChange

　　現在，正如我們正在聽的那樣，我們將不得不重新訪問和修復 ，因為每次被調用，都會觸發，我們不希望這樣。valueChangeswriteValuepatchValuepatchValuevalueChanges

　　如上文所述，我們將 設置為 ，因此它不會觸發 。emitEventfalsevalueChanges

　　注冊一觸即發

　　我們希望只要觸及任何子窗體控件，就可以觸摸窗體。因此，我們還將使用所有子窗體控件調用模板：onTouched

　　set禁用狀態

　　驗證

　　為了處理驗證，我們將首先添加一個提供程序，并實現接口：Validator

　　驗證

　　在這里，我們將使用該類的方法，并在此基礎上返回錯誤。AddressisValid

　　多個實例

　　雖然我們的表單現在已經準備好使用了，但它仍然存在一個問題。如果在同一 UI 中使用此組件，則窗體控件可能無法正常工作，因為它們都具有相同的 屬性。而且，此組件本身沒有 ，這可能有助于測試。nameidid

　　為了解決這個問題，首先讓我們介紹一個名為：hostid

　　接下來，我們將添加一個靜態計數器，我們將隨此組件的每個實例遞增該計數器：

　　最后，我們將將其用于所有 s' 和屬性。還有他們的s'屬性：idinputidname label for

　　這樣，我們完全可重復使用的地址表單就準備好了。

　　結論

　　在本教程中，我們學習了如何創建和使用表單組。然后，我們學習了如何創建嵌套表單組以及如何將它們與子組件一起使用。通過這些方法中的每一種，我們也了解了它們的利弊。

　　在最后一個但非常重要的部分中，我們學習了如何使用復合創建完全可重用的表單組件。ControlValueAccessor