粗大的内捧猛烈进出看视频,99久久免费国产精精品

方法：registerFormScope

對象：giftData

方法：validateChildForm

對象：product

註冊表單作用域

驗證信息更改時

基於表單的指令在AngularJS中的作用是什麼？

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

如何使用AngularJS指令驗證表單輸入？

AngularJS中FormController的目的是什麼？

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

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

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

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

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

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

首頁

web前端

js教程

如何在Angularjs中創(chuàng)建基於表單的指令

Joseph Gordon-Levitt

Feb 19, 2025 am 11:52 AM

How to Create Form-Based Directives in AngularJS

核心要點

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

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

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

如果您急於看到它的實際效果，您可以直接跳轉到我們的演示，或從我們的GitHub存儲庫下載代碼。

關於指令

指令是一段HTML代碼，它通過AngularJS的HTML編譯器（$compile）運行，並附加到DOM。編譯器負責遍歷DOM，查找它可以使用其他已註冊指令轉換為對象的組件。指令在一個隔離的作用域內(nèi)工作，並維護自己的視圖。它們是強大的工具，可以促進可重用的組件，這些組件可以在整個應用程序中共享。要快速復習，請查看這篇文章或AngularJS文檔。

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

關於FormController

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

預構建的驗證方法

Angular打包了14種標準驗證方法。這些包括min、max、required等驗證器。它們被構建為理解和操作幾乎所有HTML5輸入類型，並且與跨瀏覽器兼容。

<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指令驗證器的用法。此驗證確保在字段被認為有效之前已填寫該字段。它不驗證任何數(shù)據(jù)，只是用戶是否輸入了某些內(nèi)容。具有novalidate屬性表示瀏覽器不應在提交時進行驗證。

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

自定義驗證方法

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

創(chuàng)建控制器

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

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

控制器屬性

我們需要控制器中的一個屬性：

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

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

方法：registerFormScope

$scope.formsValid = false;

調用registerFormScope時，將向其傳遞一個FormController以及在指令實例化中創(chuàng)建的唯一指令ID。然後，此方法將表單作用域附加到父FormController。

方法：validateChildForm

此方法將用於與執(zhí)行驗證的後端服務器協(xié)調。當用戶正在編輯內(nèi)容並且需要進行額外驗證時，將調用它。從概念上講，我們不允許指令執(zhí)行任何外部通信。

請注意，出於本教程的目的，我省略了後端組件。相反，我根據(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服務允許指令遵守具有成功和失敗狀態(tài)的接口。 “編輯”和“保存”之間的應用程序接口的性質取決於模型數(shù)據(jù)的編輯。應該注意的是，模型數(shù)據(jù)在用戶開始鍵入時就會立即更新。

方法：Checkout

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

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

  // 驗證表單和數(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的能力，子表單可以使父表單無效。父表單名為parentForm，以清楚地說明其與子表單的關係。當子表單使用其$setValidity方法時，它將自動上升到父表單以在那裡設置有效性。 parentForm中的所有表單都必須有效，其內(nèi)部$valid屬性才能為true。

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

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

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

隔離指令作用域

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

我們的應用程序將需要一些外部雙向數(shù)據(jù)綁定方法和屬性：

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

方法：registerFormScope

指令本地作用域中的第一個屬性是將本地作用域.form註冊到控制器的方法。指令需要一個管道將本地FormController對像傳遞給主控制器。

對象：giftData

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

方法：validateChildForm

此方法與控制器中定義的方法相同。當用戶更新指令視圖中的信息時，將調用此方法。

對象：product

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

指令鏈接

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

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

link負責附加所有DOM偵聽器並使用視圖元素更新DOM。

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

註冊表單作用域

$scope.formsValid = false;

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

驗證信息更改時

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

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

當promise被拒絕時，控制器將返回無效的字段。這用於使表單（和parentForm）無效，並設置其他字段級別錯誤。在我們的演示中，我們在amount字段上使用簡單的後驗證，並且我們不返回失敗的原因。來自validateChildForm的拒絕可以像您的應用程序需要的那麼複雜或簡單。

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

設置我們的視圖

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

您可以在此處（產(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>

此視圖很重要，因為它設置了父表單，該表單將用於包裝從產(chǎn)品指令加載的所有子表單。在ng-repeat中使用ng-if可確保不會使用未使用的FormController錯誤地填充DOM。

指令視圖

$scope.formsValid = false;

注意：上面關於演示佈局的視圖在某些地方已被截斷，與本文無關。

上面的amountInput設置了一個驗證模式，該模式將由Angular的ngPattern驗證器強制執(zhí)行。上面的字段將使用Angular構建的ngDisabled指令，該指令評估表達式，如果為true，則字段將被禁用。

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

總結

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

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

結論

我的團隊在構建我們的最新應用程序時學到了很多東西。了解父子表單關係使我們能夠簡化我們的評論屏幕。使用指令使我們能夠開發(fā)一個可以在任何上下文中使用的表單，並促進良好的可重用代碼。指令還使我們能夠進行單元測試代碼，以確保我們的表單按預期工作。我們的應用程序正在生產(chǎn)中，並且已經(jīng)促成了超過100,000個訂單。

我希望您喜歡閱讀這篇文章。如果您有任何問題或意見，我很樂意在下面的評論中聽到它們。

AngularJS中基於表單的指令的常見問題解答（FAQ）

基於表單的指令在AngularJS中的作用是什麼？

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

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

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

如何使用AngularJS指令驗證表單輸入？

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