如何創(chuàng)建嵌套和可重用的表單

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

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

　　介紹

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

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

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

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

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

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

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

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

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

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

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

　　相同的窗體組如下所示：

　　請(qǐng)注意，我們還利用了 Angular 14 中引入的嚴(yán)格類型化表單功能。

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

　　指令提供的輸入將每個(gè)單獨(dú)的輸入綁定到 中定義的窗體控件。窗體控件與其各自的元素進(jìn)行通信。它們還將更改傳達(dá)給表單組實(shí)例，該實(shí)例為模型值提供事實(shí)來(lái)源。formControlNameFormControlNameFormGroup

　　優(yōu)點(diǎn)

　　簡(jiǎn)單明了的模板和表單組

　　缺點(diǎn)

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

　　字段集之間缺少邏輯隔離

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

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

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

　　請(qǐng)注意，現(xiàn)在在地址中，相關(guān)字段按 元素分組。我們還創(chuàng)建了一個(gè)類型，以獲得更好的類型安全性，并在 IDE 中更好地自動(dòng)完成。讓我們?cè)谀０逯袑?duì)嵌套表單進(jìn)行分組：profile Form address AddressForm

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

　　優(yōu)點(diǎn)

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

　　字段集之間存在邏輯隔離

　　缺點(diǎn)

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

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

　　在上一節(jié)中，我們?cè)陬愔袑?shí)現(xiàn)了邏輯分離，但模板仍然很復(fù)雜。我們將創(chuàng)建另一個(gè)組件來(lái)處理模板復(fù)雜性。

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

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

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

　　優(yōu)點(diǎn)

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

　　缺點(diǎn)

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

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

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

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

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

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

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

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

　　我們的目標(biāo)是使用如下所示的地址表單：

　　控制值訪問(wèn)器

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

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

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

　　下圖顯示了交互：

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

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

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

　　我們只需要處理該接口的所有4個(gè)必需方法，它就會(huì)正常工作，無(wú)論我們?cè)趦?nèi)部如何處理它。

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

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

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

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

　　對(duì)于驗(yàn)證，您可以有自己的邏輯來(lái)驗(yàn)證地址，但現(xiàn)在我們將保持簡(jiǎn)單。我們將在實(shí)現(xiàn)驗(yàn)證時(shí)使用它。

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

　　寫(xiě)入值

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

　　注冊(cè)更改

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

　　現(xiàn)在，正如我們正在聽(tīng)的那樣，我們將不得不重新訪問(wèn)和修復(fù) ，因?yàn)槊看伪徽{(diào)用，都會(huì)觸發(fā)，我們不希望這樣。valueChangeswriteValuepatchValuepatchValuevalueChanges

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

　　注冊(cè)一觸即發(fā)

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

　　set禁用狀態(tài)

　　驗(yàn)證

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

　　驗(yàn)證

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

　　多個(gè)實(shí)例

　　雖然我們的表單現(xiàn)在已經(jīng)準(zhǔn)備好使用了，但它仍然存在一個(gè)問(wèn)題。如果在同一 UI 中使用此組件，則窗體控件可能無(wú)法正常工作，因?yàn)樗鼈兌季哂邢嗤?屬性。而且，此組件本身沒(méi)有 ，這可能有助于測(cè)試。nameidid

　　為了解決這個(gè)問(wèn)題，首先讓我們介紹一個(gè)名為：hostid

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

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

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

　　結(jié)論

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

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