有關(guān)創(chuàng)建嵌套和可重用窗體的深入教程 ， 通過使用復(fù)合控制值訪問器實現(xiàn)完全可靠性。

　　在本教程中，您將學(xué)習(xí)如何創(chuàng)建和使用窗體組。我們還將學(xué)習(xí)如何通過使用復(fù)合控制值訪問器來實現(xiàn)完全的可靠性。

　　介紹

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

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

　　在本教程中，我們將討論創(chuàng)建表單的 4 種方法，我們還將介紹每種方法的優(yōu)缺點：

　　如何創(chuàng)建和使用表單組

　　如何創(chuàng)建嵌套表單組

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

　　如何使用復(fù)合創(chuàng)建可重用表單ControlValueAccessor

　　如何創(chuàng)建和使用表單組

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

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

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

　　相同的窗體組如下所示：

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

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

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

　　優(yōu)點

　　簡單明了的模板和表單組

　　缺點

　　難以創(chuàng)建和維護復(fù)雜的表單模型

　　字段集之間缺少邏輯隔離

　　如何創(chuàng)建嵌套表單組

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

　　讓我們對嵌套組中的相關(guān)字段進行分組尋址：

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

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

　　優(yōu)點

　　易于創(chuàng)建和維護復(fù)雜的表單模型

　　字段集之間存在邏輯隔離

　　缺點

　　由于字段更多且表單復(fù)雜，模板更大

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

　　在上一節(jié)中，我們在類中實現(xiàn)了邏輯分離，但模板仍然很復(fù)雜。我們將創(chuàng)建另一個組件來處理模板復(fù)雜性。

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

　　該模板非常簡單，它只有與地址相關(guān)的字段。以下是我們?nèi)绾卧诟附M件中使用它：

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

　　優(yōu)點

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

　　缺點

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

　　如何使用復(fù)合創(chuàng)建可重用表單ControlValueAccessor

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

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

　　該組件應(yīng)可在任何窗體中使用。

　　該組件應(yīng)可用于模板驅(qū)動和反應(yīng)式表單。

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

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

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

　　控制值訪問器

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

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

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

　　下圖顯示了交互：

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

　　復(fù)合控制值訪問器

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

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

　　可重復(fù)使用的表單

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

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

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

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

　　接下來，根據(jù)前面有關(guān) 的文章，我們將從實現(xiàn)接口和 as 提供程序開始：ControlValueAccessorControlValueAccessorNG_VALUE_ACCESSOR

　　寫入值

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

　　注冊更改

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

　　現(xiàn)在，正如我們正在聽的那樣，我們將不得不重新訪問和修復(fù) ，因為每次被調(diào)用，都會觸發(fā)，我們不希望這樣。valueChangeswriteValuepatchValuepatchValuevalueChanges

　　如上文所述，我們將 設(shè)置為 ，因此它不會觸發(fā) 。emitEventfalsevalueChanges

　　注冊一觸即發(fā)

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

　　set禁用狀態(tài)

　　驗證

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

　　驗證

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

　　多個實例

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

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

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

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

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

　　結(jié)論

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

　　在最后一個但非常重要的部分中，我們學(xué)習(xí)了如何使用復(fù)合創(chuàng)建完全可重用的表單組件。ControlValueAccessor