核心要點(diǎn)

• 使用AngularJS指令創(chuàng)建可復(fù)用的表單組件，組件擁有獨(dú)立作用域，增強(qiáng)了Web應(yīng)用程序的模塊化和可維護(hù)性。
• 在指令中實(shí)現(xiàn)自定義驗(yàn)證方法來(lái)處理復(fù)雜的輸入驗(yàn)證，確保數(shù)據(jù)在提交到服務(wù)器之前完整性。
• 利用AngularJS內(nèi)置的表單驗(yàn)證技術(shù)（如ng-required和ng-pattern）快速建立客戶端輸入驗(yàn)證。
• 使用AngularJS中的FormController管理表單狀態(tài)和驗(yàn)證，為用戶提供即時(shí)反饋，提升用戶體驗(yàn)。
• 使用ng-submit指令處理AngularJS中的表單提交，阻止默認(rèn)提交行為，并在將數(shù)據(jù)發(fā)送到服務(wù)器之前啟用自定義驗(yàn)證邏輯。

許多開(kāi)發(fā)者在對(duì)用戶提交的數(shù)據(jù)執(zhí)行復(fù)雜的業(yè)務(wù)約束時(shí)面臨獨(dú)特的挑戰(zhàn)。最近，我在GiftCards.com編寫(xiě)應(yīng)用程序時(shí)，我的團(tuán)隊(duì)也面臨著這樣的挑戰(zhàn)。我們需要找到一種方法，允許我們的客戶在一個(gè)視圖中編輯多個(gè)產(chǎn)品，每個(gè)產(chǎn)品都有自己獨(dú)特的驗(yàn)證規(guī)則。

這被證明具有挑戰(zhàn)性，因?yàn)樗笪覀冊(cè)贖TML源代碼中使用多個(gè)<form></form>標(biāo)簽，并為每個(gè)表單實(shí)例維護(hù)一個(gè)驗(yàn)證模型。在找到解決方案之前，我們嘗試了許多方法，例如使用ngRepeat顯示子表單。最終，我們?yōu)槊糠N產(chǎn)品類(lèi)型創(chuàng)建一個(gè)指令（每個(gè)指令在其視圖中都有一個(gè)<form></form>），并讓指令綁定到其父控制器。這使我們能夠利用Angular的父子表單繼承來(lái)確保只有在所有子表單都有效的情況下，父表單才有效。在本教程中，我們將構(gòu)建一個(gè)簡(jiǎn)單的產(chǎn)品評(píng)論屏幕（突出顯示我們當(dāng)前應(yīng)用程序的關(guān)鍵組件）。我們將有兩個(gè)產(chǎn)品，每個(gè)產(chǎn)品都有自己的指令，并且每個(gè)產(chǎn)品都有獨(dú)特的驗(yàn)證規(guī)則。將有一個(gè)簡(jiǎn)單的結(jié)賬按鈕，它將確保兩個(gè)表單都有效。

如果您急于看到它的實(shí)際效果，您可以直接跳轉(zhuǎn)到我們的演示，或從我們的GitHub存儲(chǔ)庫(kù)下載代碼。

關(guān)于指令

指令是一段HTML代碼，它通過(guò)AngularJS的HTML編譯器（$compile）運(yùn)行，并附加到DOM。編譯器負(fù)責(zé)遍歷DOM，查找它可以使用其他已注冊(cè)指令轉(zhuǎn)換為對(duì)象的組件。指令在一個(gè)隔離的作用域內(nèi)工作，并維護(hù)自己的視圖。它們是強(qiáng)大的工具，可以促進(jìn)可重用的組件，這些組件可以在整個(gè)應(yīng)用程序中共享。要快速?gòu)?fù)習(xí)，請(qǐng)查看這篇文章或AngularJS文檔。

指令以?xún)煞N方式解決了我們的根本問(wèn)題：首先，每個(gè)實(shí)例都有一個(gè)隔離的作用域；其次，指令使用編譯器傳遞，編譯器使用Angular的ngForm指令識(shí)別視圖HTML中的表單元素。這個(gè)內(nèi)置指令允許多個(gè)嵌套的表單元素，接受一個(gè)可選的name屬性來(lái)實(shí)例化FormController，并將返回表單對(duì)象。

關(guān)于FormController

當(dāng)編譯器識(shí)別DOM中的任何表單對(duì)象時(shí)，它將使用ngForm指令實(shí)例化一個(gè)FormController對(duì)象。此控制器將掃描所有輸入、選擇和文本區(qū)域元素，并創(chuàng)建相應(yīng)的控件?？丶枰粋€(gè)模型屬性來(lái)設(shè)置雙向數(shù)據(jù)綁定，并允許通過(guò)各種預(yù)構(gòu)建的驗(yàn)證方法提供即時(shí)用戶反饋。為消費(fèi)者提供即時(shí)反饋，使他們能夠在發(fā)出HTTP請(qǐng)求之前知道哪些信息有效。

預(yù)構(gòu)建的驗(yàn)證方法

Angular打包了14種標(biāo)準(zhǔn)驗(yàn)證方法。這些包括min、max、required等驗(yàn)證器。它們被構(gòu)建為理解和操作幾乎所有HTML5輸入類(lèi)型，并且與跨瀏覽器兼容。

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

上面的示例顯示了在Angular中使用ngRequired指令驗(yàn)證器的用法。此驗(yàn)證確保在字段被認(rèn)為有效之前已填寫(xiě)該字段。它不驗(yàn)證任何數(shù)據(jù)，只是用戶是否輸入了某些內(nèi)容。具有novalidate屬性表示瀏覽器不應(yīng)在提交時(shí)進(jìn)行驗(yàn)證。

專(zhuān)業(yè)提示：不要在任何Angular表單上設(shè)置action屬性。這將阻止Angular嘗試確保表單不會(huì)以往返方式提交。

自定義驗(yàn)證方法

Angular提供了一個(gè)廣泛的API來(lái)幫助創(chuàng)建自定義驗(yàn)證規(guī)則。使用此API，您可以為標(biāo)準(zhǔn)驗(yàn)證中未涵蓋的復(fù)雜輸入創(chuàng)建和擴(kuò)展您自己的驗(yàn)證規(guī)則。我的團(tuán)隊(duì)依靠一些自定義驗(yàn)證方法來(lái)運(yùn)行我們的服務(wù)器使用的復(fù)雜正則表達(dá)式模式。如果沒(méi)有運(yùn)行復(fù)雜正則表達(dá)式匹配器的能力，我們可能會(huì)向后端服務(wù)器發(fā)送不正確的數(shù)據(jù)。這將向用戶顯示錯(cuò)誤，從而導(dǎo)致不良的用戶體驗(yàn)。自定義驗(yàn)證器使用指令語(yǔ)法，需要注入ngModel。更多信息可以通過(guò)查閱AngularJS的文檔來(lái)找到。

創(chuàng)建控制器

現(xiàn)在，我們可以開(kāi)始我們的應(yīng)用程序了。您可以在此處找到控制器代碼的概述。

控制器將是事情的核心。它只有少數(shù)幾個(gè)職責(zé)——它的視圖將有一個(gè)名為parentForm的表單元素，它只有一個(gè)屬性，它的方法將包括registerFormScope、validateChildForm和checkout。

控制器屬性

我們需要控制器中的一個(gè)屬性：

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

此屬性用于維護(hù)表單整體有效性的布爾狀態(tài)。我們使用此屬性在單擊“結(jié)賬”按鈕后禁用其狀態(tài)。

方法：registerFormScope

$scope.formsValid = false;

調(diào)用registerFormScope時(shí)，將向其傳遞一個(gè)FormController以及在指令實(shí)例化中創(chuàng)建的唯一指令I(lǐng)D。然后，此方法將表單作用域附加到父FormController。

方法：validateChildForm

此方法將用于與執(zhí)行驗(yàn)證的后端服務(wù)器協(xié)調(diào)。當(dāng)用戶正在編輯內(nèi)容并且需要進(jìn)行額外驗(yàn)證時(shí)，將調(diào)用它。從概念上講，我們不允許指令執(zhí)行任何外部通信。

請(qǐng)注意，出于本教程的目的，我省略了后端組件。相反，我根據(jù)用戶輸入的金額是否在特定范圍內(nèi)（產(chǎn)品A為10-50，產(chǎn)品B為25-500），拒絕或解析promise。

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

使用$q服務(wù)允許指令遵守具有成功和失敗狀態(tài)的接口?！熬庉嫛焙汀氨４妗敝g的應(yīng)用程序接口的性質(zhì)取決于模型數(shù)據(jù)的編輯。應(yīng)該注意的是，模型數(shù)據(jù)在用戶開(kāi)始鍵入時(shí)就會(huì)立即更新。

方法：Checkout

單擊“結(jié)賬”表示用戶已完成編輯并希望結(jié)賬。此可操作項(xiàng)目需要驗(yàn)證在指令中加載的所有表單都通過(guò)驗(yàn)證，然后才能將模型數(shù)據(jù)發(fā)送到服務(wù)器。本文的范圍不包括用于將數(shù)據(jù)發(fā)送到服務(wù)器的方法。我鼓勵(lì)您探索使用$http服務(wù)進(jìn)行所有客戶端到服務(wù)器的通信。

$scope.validateChildForm = function (form, data, product) {
  // 重置表單，使其不再有效
  $scope.formsValid = false;
  var deferred = $q.defer();

  // 驗(yàn)證表單和數(shù)據(jù)的邏輯
  // 必須在promise上返回resolve()或reject()。
  $timeout(function () {
    if (angular.isUndefined(data.amount)) {
      return deferred.reject(['amount']);
    }

    if ((data.amount < product.minAmount) || (data.amount > product.maxAmount)) {
      return deferred.reject(['amount']);
    }

    deferred.resolve();
  });
  return deferred.promise;
}

此方法使用Angular的能力，子表單可以使父表單無(wú)效。父表單名為parentForm，以清楚地說(shuō)明其與子表單的關(guān)系。當(dāng)子表單使用其$setValidity方法時(shí)，它將自動(dòng)上升到父表單以在那里設(shè)置有效性。parentForm中的所有表單都必須有效，其內(nèi)部$valid屬性才能為true。

創(chuàng)建我們的指令

我們的指令必須遵循一個(gè)通用的接口，該接口允許完全互操作性和可擴(kuò)展性。我們的指令的名稱(chēng)取決于它們包含的產(chǎn)品。

您可以在此處（產(chǎn)品A）和此處（產(chǎn)品B）找到指令代碼的概述。

隔離指令作用域

每個(gè)實(shí)例化的指令都將獲得一個(gè)隔離的作用域，該作用域被本地化到指令，并且不知道外部屬性。但是，AngularJS允許創(chuàng)建使用父作用域方法和屬性的指令。當(dāng)將外部屬性傳遞到本地作用域時(shí)，您可以指示要設(shè)置雙向數(shù)據(jù)綁定。

我們的應(yīng)用程序?qū)⑿枰恍┩獠侩p向數(shù)據(jù)綁定方法和屬性：

$scope.checkout = function () {
  if($scope.parentForm.$valid) {
    // 連接服務(wù)器以發(fā)布數(shù)據(jù)
  }
  $scope.formsValid = $scope.parentForm.$valid;
};

方法：registerFormScope

指令本地作用域中的第一個(gè)屬性是將本地作用域.form注冊(cè)到控制器的方法。指令需要一個(gè)管道將本地FormController對(duì)象傳遞給主控制器。

對(duì)象：giftData

這是將在指令視圖中使用的集中式模型數(shù)據(jù)。此信息將進(jìn)行雙向數(shù)據(jù)綁定，以確保在FormController中發(fā)生的更新將傳播到主控制器。

方法：validateChildForm

此方法與控制器中定義的方法相同。當(dāng)用戶更新指令視圖中的信息時(shí)，將調(diào)用此方法。

對(duì)象：product

此對(duì)象包含有關(guān)正在購(gòu)買(mǎi)的產(chǎn)品的信息。我們的演示使用一個(gè)相對(duì)較小的對(duì)象，只有少數(shù)幾個(gè)屬性。我的團(tuán)隊(duì)的現(xiàn)實(shí)世界應(yīng)用程序有很多信息用于在應(yīng)用程序中做出決策。它被傳遞到validateChildForm中，以提供正在驗(yàn)證的內(nèi)容的上下文。

指令鏈接

我們的指令將使用postLink函數(shù)，并向其傳遞一個(gè)作用域?qū)ο?。除此之外?code>postLink函數(shù)還接受其他幾個(gè)參數(shù)。它們?nèi)缦拢?/p>

1. scope – 用于訪問(wèn)為每個(gè)指令實(shí)例創(chuàng)建的隔離作用域。
2. iElement – 用于訪問(wèn)元素項(xiàng)。只有在其分配到的元素內(nèi)，從postLink函數(shù)中更新和修改該元素才是安全的。
3. iAttrs – 用于訪問(wèn)在實(shí)例化指令的同一標(biāo)簽上的屬性。
4. controller – 如果存在外部控制器依賴(lài)項(xiàng)，則可以在鏈接函數(shù)中使用。這些必須與指令對(duì)象的require屬性相對(duì)應(yīng)。
5. transcludeFn – 該函數(shù)與指令對(duì)象的$transclude參數(shù)中列出的函數(shù)相同。

link負(fù)責(zé)附加所有DOM偵聽(tīng)器并使用視圖元素更新DOM。

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

注冊(cè)表單作用域

$scope.formsValid = false;

將方法registerFormScope包裝在$timeout中會(huì)將其執(zhí)行延遲到執(zhí)行堆棧的末尾。這為編譯器提供了足夠的時(shí)間來(lái)完成控制器和指令之間的所有必要鏈接。scope.form.fields是一個(gè)數(shù)組，是FormController中找到的屬性的名稱(chēng)，這對(duì)于設(shè)置服務(wù)器端驗(yàn)證錯(cuò)誤非常重要。registerFormScope的目的是將FormController發(fā)送到父控制器，允許新創(chuàng)建的表單設(shè)置為parentForm的子表單。

驗(yàn)證信息更改時(shí)

$scope.registerFormScope = function (form, id) {
  $scope.parentForm['childForm'+id] = form;
};

當(dāng)表單發(fā)生更改并且用戶準(zhǔn)備好對(duì)其進(jìn)行驗(yàn)證時(shí)，將調(diào)用指令中的saveForm方法。此方法將依次調(diào)用控制器的validateChildForm方法，并傳入FormController、scope.giftData和scope.product?？刂破鞣祷匾粋€(gè)promise，該promise將根據(jù)其他驗(yàn)證規(guī)則被解析或拒絕。

當(dāng)promise被拒絕時(shí)，控制器將返回?zé)o效的字段。這用于使表單（和parentForm）無(wú)效，并設(shè)置其他字段級(jí)別錯(cuò)誤。在我們的演示中，我們?cè)?code>amount字段上使用簡(jiǎn)單的后驗(yàn)證，并且我們不返回失敗的原因。來(lái)自validateChildForm的拒絕可以像您的應(yīng)用程序需要的那么復(fù)雜或簡(jiǎn)單。

當(dāng)promise成功返回時(shí)，指令需要設(shè)置表單中字段的有效性。代碼還必須清除任何先前識(shí)別的服務(wù)器錯(cuò)誤。這確保指令不會(huì)錯(cuò)誤地向用戶提供錯(cuò)誤。使用$setValidity設(shè)置所有字段會(huì)鏈接到控制器中的parentForm，以設(shè)置其有效性，前提是所有子表單都有效。

設(shè)置我們的視圖

視圖不是很復(fù)雜，為了我們的演示，我們將產(chǎn)品簡(jiǎn)化為以下字段：名稱(chēng)和金額。在下一步中，我們將探討完成此應(yīng)用程序所需的視圖。

您可以在此處（產(chǎn)品A）和此處（產(chǎn)品B）找到視圖代碼的概述。

路由視圖

<input type="text" ng-model="size" ng-required="true" novalidate>
  <span ng-show="myForm.size.$error.required">
    Size:
    The value is required!
  </span>

此視圖很重要，因?yàn)樗O(shè)置了父表單，該表單將用于包裝從產(chǎn)品指令加載的所有子表單。在ng-repeat中使用ng-if可確保不會(huì)使用未使用的FormController錯(cuò)誤地填充DOM。

指令視圖

$scope.formsValid = false;

注意：上面關(guān)于演示布局的視圖在某些地方已被截?cái)啵c本文無(wú)關(guān)。

上面的amountInput設(shè)置了一個(gè)驗(yàn)證模式，該模式將由Angular的ngPattern驗(yàn)證器強(qiáng)制執(zhí)行。上面的字段將使用Angular構(gòu)建的ngDisabled指令，該指令評(píng)估表達(dá)式，如果為true，則字段將被禁用。

在視圖底部，我們顯示所有錯(cuò)誤，以便在用戶單擊“保存”按鈕時(shí)向用戶提供反饋。這將設(shè)置子表單上的$submitted屬性。

總結(jié)

將所有部分放在一起，我們最終得到以下內(nèi)容：（此處應(yīng)插入CodePen鏈接或代碼片段）

您也可以在GitHub上找到所有代碼。

結(jié)論

我的團(tuán)隊(duì)在構(gòu)建我們的最新應(yīng)用程序時(shí)學(xué)到了很多東西。了解父子表單關(guān)系使我們能夠簡(jiǎn)化我們的評(píng)論屏幕。使用指令使我們能夠開(kāi)發(fā)一個(gè)可以在任何上下文中使用的表單，并促進(jìn)良好的可重用代碼。指令還使我們能夠進(jìn)行單元測(cè)試代碼，以確保我們的表單按預(yù)期工作。我們的應(yīng)用程序正在生產(chǎn)中，并且已經(jīng)促成了超過(guò)100,000個(gè)訂單。

我希望您喜歡閱讀這篇文章。如果您有任何問(wèn)題或意見(jiàn)，我很樂(lè)意在下面的評(píng)論中聽(tīng)到它們。

AngularJS中基于表單的指令的常見(jiàn)問(wèn)題解答（FAQ）

基于表單的指令在AngularJS中的作用是什么？

AngularJS中基于表單的指令在管理和驗(yàn)證表單中的用戶輸入方面發(fā)揮著至關(guān)重要的作用。它們提供了一種創(chuàng)建自定義HTML標(biāo)簽的方法，這些標(biāo)簽充當(dāng)新的自定義窗口小部件。它們還可以以向我們的應(yīng)用程序添加功能的方式來(lái)操作DOM。當(dāng)您希望在整個(gè)應(yīng)用程序中封裝和重用通用功能時(shí)，這些指令尤其有用。

如何在AngularJS中創(chuàng)建自定義基于表單的指令？

在AngularJS中創(chuàng)建自定義基于表單的指令涉及使用.directive函數(shù)定義一個(gè)新指令。您需要為您的指令提供一個(gè)名稱(chēng)和一個(gè)工廠函數(shù)，該函數(shù)將生成指令的選項(xiàng)對(duì)象。此對(duì)象可以定義多個(gè)屬性，包括restrict、template、scope、link等等。restrict選項(xiàng)用于指定如何在HTML中調(diào)用指令。

如何使用AngularJS指令驗(yàn)證表單輸入？

AngularJS提供了一些用于表單驗(yàn)證的內(nèi)置指令，包括ng-required、ng-pattern、ng-minlength、ng-maxlength等等。這些指令向您的表單輸入添加了驗(yàn)證功能，確保用戶輸入在表單提交之前滿足某些條件。您還可以為更復(fù)雜的驗(yàn)證要求創(chuàng)建自定義驗(yàn)證指令。

AngularJS中FormController的目的是什么？

AngularJS中的FormController提供用于跟蹤表單及其控件的狀態(tài)、檢查有效性和重置表單的方法。它在表單指令內(nèi)自動(dòng)可用，可以注入到控制器、其他指令或服務(wù)中。

如何在AngularJS中使用ng-submit指令？

AngularJS中的ng-submit指令允許您在提交表單時(shí)指定自定義行為。您可以使用ng-submit在事件發(fā)生時(shí)執(zhí)行表達(dá)式，而不是編寫(xiě)JavaScript代碼來(lái)處理表單的提交事件。這在表單無(wú)效時(shí)阻止默認(rèn)表單提交行為時(shí)尤其有用。

AngularJS中form和ng-form有什么區(qū)別？

AngularJS中form和ng-form的主要區(qū)別在于ng-form可以嵌套在其他表單中。這允許您將相關(guān)的輸入組合在一起并將其作為一個(gè)子表單進(jìn)行驗(yàn)證。另一方面，標(biāo)準(zhǔn)的form指令不支持嵌套。

如何在AngularJS中設(shè)置表單字段的有效性？

您可以使用ngModelController提供的$setValidity方法來(lái)設(shè)置AngularJS中表單字段的有效性。此方法接受兩個(gè)參數(shù)：驗(yàn)證鍵和布爾值。如果布爾值為false，則該鍵將添加到字段的$error對(duì)象中。

如何在AngularJS表單中使用ng-model指令？

AngularJS中的ng-model指令將輸入、選擇、文本區(qū)域或自定義表單控件綁定到作用域上的屬性。它在模型和視圖之間提供雙向數(shù)據(jù)綁定。這意味著對(duì)輸入字段的任何更改都將自動(dòng)更新模型，反之亦然。

AngularJS表單中ng-change指令的作用是什么？

AngularJS中的ng-change指令允許您在用戶更改輸入時(shí)指定自定義行為。當(dāng)您希望在用戶完成鍵入或進(jìn)行選擇后立即執(zhí)行某些操作，而不是等待表單提交時(shí)，此指令很有用。

如何在AngularJS中創(chuàng)建自定義驗(yàn)證指令？

在AngularJS中創(chuàng)建自定義驗(yàn)證指令涉及定義一個(gè)需要ngModel的新指令。在指令的link函數(shù)中，您可以使用ngModelController的$validators或$asyncValidators管道來(lái)添加自定義驗(yàn)證邏輯。

以上是如何在Angularjs中創(chuàng)建基于表單的指令的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！