AngularJSでフォームベースのディレクティブを作成する方法-jsチュートリアル-php.cn

How to Create Form-Based Directives in AngularJS

コアポイント

AngularJSディレクティブを使用して再利用可能なフォームコンポーネントを作成し、Webアプリケーションのモジュール性と保守性を高めます。
複雑な入力検証を処理するための指示にカスタム検証方法を実装し、サーバーに送信する前にデータの整合性を確保します。
angularjsビルトインフォーム検証技術（ng-requiredやng-patternなど）を使用して、クライアントの入力検証をすばやく確立します。
FormControllerを使用してフォームステータスと検証を管理し、ユーザーにインスタントフィードバックを提供し、ユーザーエクスペリエンスを向上させます。

ディレクティブを使用して、デフォルトの送信動作をブロックし、サーバーにデータを送信する前にカスタム検証ロジックを有効にします。 ng-submit

多くの開発者は、ユーザーがサビされたデータで複雑なビジネス上の制約を実行する際に、独自の課題に直面しています。最近、私のチームは、GiftCards.comでアプリケーションを書いていたときにこの課題に直面しました。お客様が1つのビューで複数の製品を編集できるようにする方法を見つける必要があります。それぞれに独自の検証ルールがあります。

これは、HTMLソースコードで複数の

タグを使用し、各フォームインスタンスの検証モデルを維持する必要があるため、挑戦的であることがわかります。ソリューションを見つける前に、サブフォームを表示するために<form></form>を使用するなど、多くの方法を試しました。最後に、各製品タイプ（各ディレクティブにはそのビューにngRepeatがあります）のディレクティブを作成し、ディレクティブを親コントローラーにバインドします。これにより、Angularの親子のフォーム継承を活用して、すべての子フォームが有効である場合にのみ、親フォームが有効であることを確認できます。このチュートリアルでは、シンプルな製品レビュー画面を作成します（現在のアプリケーションの主要なコンポーネントを強調表示します）。 2つの製品があり、それぞれに独自の指示があり、各製品には独自の検証ルールがあります。単純なチェックアウトボタンがあり、両方のフォームが有効であることを確認します。 <form></form>

それが実際にどのように機能するかを確認することを切望している場合は、デモに直接ジャンプしたり、GitHubリポジトリからコードをダウンロードしたりできます。

コマンドについて

ディレクティブは、AngularJSのHTMLコンパイラ（）を介して実行され、DOMに接続されているHTMLコードの一部です。コンパイラは、DOMを通過し、他の登録ディレクティブを使用してオブジェクトに変換できるコンポーネントを見つける責任があります。ディレクティブは孤立した範囲内で機能し、独自の見解を維持します。これらは、アプリケーション全体で共有できる再利用可能なコンポーネントを促進する強力なツールです。簡単なレビューについては、この記事またはAngularJSドキュメントをご覧ください。

ディレクティブは、基本的な問題を2つの方法で解決します。1つ目は、各インスタンスに隔離された範囲で、[angular ngForm属性を受け入れてnameをインスタンス化し、フォームオブジェクトを返すことができます。 FormController FormController

について

コンパイラがDOM内の任意のフォームオブジェクトを認識すると、

ディレクティブを使用してngFormオブジェクトをインスタンス化します。このコントローラーは、すべての入力、選択、およびテキストエリア要素をスキャンし、対応するコントロールを作成します。このコントロールでは、モデルプロパティが双方向データバインディングを設定する必要があり、さまざまな事前に構築された検証方法を介してインスタントユーザーフィードバックを可能にします。消費者にインスタントフィードバックを提供し、HTTPリクエストを行う前にどの情報が有効かを知ることができます。 FormController

事前に構築された検証方法

Angularパッケージ14標準検証方法。これらには、

、min、max、およびその他のバリデーターが含まれます。それらは、ほぼすべてのHTML5入力タイプを理解して操作するように構築されており、クロスブラウザー互換性があります。 required

<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属性を持つことは、提出時にブラウザが確認しないことを意味します。 novalidate

Proのヒント：角度形式に
属性を設定しないでください。これにより、Angularがフォームが往復的に提出されないようにしようとすることができなくなります。 action

カスタム検証方法

Angularは、カスタム検証ルールの作成を支援する広範なAPIを提供します。このAPIを使用すると、標準検証でカバーされていない複雑な入力の独自の検証ルールを作成および拡張できます。私のチームは、サーバーが使用する複雑な正規表現パターンを実行するために、いくつかのカスタム検証方法に依存しています。複雑な正規表現マッチャーを実行する機能がなければ、誤ったデータをバックエンドサーバーに送信する場合があります。これにより、ユーザーにエラーが表示され、ユーザーエクスペリエンスが不良になります。カスタムバリエーターはディレクティブ構文を使用し、注入する必要があります

。 AngularJSドキュメントを参照することにより、詳細については、詳細をご覧ください。 ngModel

コントローラーを作成します

今、アプリケーションを開始できます。コントローラーコードの概要はこちらをご覧ください。

コントローラーは物事の中心にあります。それはわずかな責任しか持っていません - そのビューには

という名前のフォーム要素があり、属性が1つしかなく、その方法には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>

ログイン後にコピー

このプロパティは、フォームの全体的な妥当性のブール状態を維持するために使用されます。このプロパティを使用して、チェックアウトボタンをクリックした後にステータスを無効にします。

メソッド：RegisterFormScope <

が呼び出された場合、a

$scope.formsValid = false;

ログイン後にコピー

および命令インスタンス化で作成された一意の指示IDが渡されます。この方法は、フォームスコープを親

に追加します。 registerFormScope FormControllerFormControllerメソッド：validAteChildform <

この方法は、検証を実行するバックエンドサーバーと調整するために使用されます。ユーザーがコンテンツを編集しているときに呼び出され、追加の確認が必要です。概念的には、外部通信を実行する命令は許可されていません。

このチュートリアルの目的のために、バックエンドコンポーネントを省略したことに注意してください。代わりに、ユーザーが入力した金額が特定の範囲内にあるかどうかに基づいて、約束を拒否または解析することを拒否または解析します（製品Aは10〜50、製品Bは25-500です）。

サービスを使用すると、指示が成功と失敗のステータスを持つインターフェイスを順守することができます。「編集」と「保存」の間のアプリケーションインターフェイスの性質は、モデルデータの編集に依存します。ユーザーが入力を開始するときに、モデルデータがすぐに更新されることに注意する必要があります。

メソッド：チェックアウト

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

ログイン後にコピー

「チェックアウト」をクリックして、ユーザーが編集を完了し、チェックアウトしたいことを示します。この実用的なアイテムでは、モデルデータをサーバーに送信する前に、指令にロードされたすべてのフォームが検証されることを確認する必要があります。この記事の範囲には、データをサーバーに送信する方法は含まれていません。すべてのクライアント間通信に$qサービスを使用することを検討することをお勧めします。

この方法はAngularの能力を使用し、子のフォームは親の形を無効にする可能性があります。親の形式は、子供の形との関係を明確に説明するためにに指名されています。子フォームが

メソッドを使用すると、親フォームに自動的に上昇して、そこに有効性を設定します。

のすべてのフォームは有効でなければならず、その内部$http属性は真でなければなりません。

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

  // 验证表单和数据的逻辑
  // 必须在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;
}

ログイン後にコピー

ディレクティブを作成しますparentForm$setValidity parentForm私たちの命令は、完全な相互運用性とスケーラビリティを可能にする共通のインターフェイスに従う必要があります。私たちの指令の名前は、それらに含まれる製品によって異なります。 $valid

ここ（製品a）およびここ（製品b）の命令コードの概要を見つけることができます。

分離命令の範囲範囲<

インスタンス化された各指令は、指令にローカライズされ、外部プロパティが既知の孤立した範囲を取得します。ただし、Angularjsは、親スコープメソッドとプロパティを使用するディレクティブを作成できます。外部プロパティをローカルスコープに渡す場合、双方向データバインディングを設定することを示すことができます。

アプリケーションには、外部の双方向データの結合方法とプロパティが必要です。

メソッド：RegisterFormScope

ディレクティブローカルスコープの最初のプロパティは、ローカルスコープをコントローラーに登録する方法です。この命令では、ローカルオブジェクトをメインコントローラーに渡すためのパイプラインが必要です。

オブジェクト：giftdata

これは、命令ビューで使用される集中モデルデータです。この情報は、FormControllerで発生する更新がメインコントローラーに伝播するように、双方向のデータバインディングになります。

メソッド：validAteChildform

このメソッドは、コントローラーで定義されている方法と同じです。この方法は、ユーザーが命令ビューで情報を更新するときに呼び出されます。

オブジェクト：製品

このオブジェクトには、購入されている製品に関する情報が含まれています。私たちのデモンストレーションでは、少数のプロパティしかない比較的小さなオブジェクトを使用しています。私のチームの実際のアプリケーションには、アプリケーションで決定を下すための多くの情報があります。検証されているコンテンツのコンテキストを提供するために、validateChildFormに渡されます。

命令リンク

私たちの指令は、postLink関数を使用し、スコープオブジェクトを渡します。さらに、postLink関数は他のいくつかのパラメーターも受け入れます。それらは次のとおりです：

scope - 各ディレクティブインスタンスに作成された分離スコープにアクセスするために使用されます。
iElement - 要素アイテムにアクセスするために使用されます。割り当てられている要素内のpostLink関数から要素を更新および変更することは安全です。
iAttrs - インスタンス化指令の同じタグのプロパティにアクセスするために使用されます。
controller - 外部コントローラーの依存関係が存在する場合、リンク関数で使用できます。これらは、ディレクティブオブジェクトのrequire属性に対応する必要があります。
transcludeFn - この関数は、命令オブジェクトの$transcludeパラメーターにリストされている関数と同じです。

すべてのDOMリスナーを添付し、ビュー要素を使用してDOMを更新する

link責任があります。

<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;

ログイン後にコピー

ラッピングメソッドregisterFormScopein$timeoutは、実行スタックが終了するまで実行を遅らせます。これにより、コンパイラは、コントローラーと命令の間に必要なすべてのリンクを完了するのに十分な時間を提供します。 scope.form.fieldsは配列であり、FormControllerで見つかったプロパティの名前であり、サーバー側の検証エラーを設定するために非常に重要です。 registerFormScopeの目的は、FormControllerを親コントローラーに送信し、新しく作成されたフォームをparentFormの子フォームに設定できるようにすることです。

検証情報が変更されたとき

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

ログイン後にコピー

フォームが変更され、ユーザーがそれを検証する準備ができた場合、指令の

メソッドが呼び出されます。この方法では、コントローラーのsaveFormメソッドを順番に呼び出して、validateChildForm、FormController、scope.giftDataに渡します。コントローラーは、他の検証ルールに従って解析または拒否される約束を返します。 scope.product

約束が拒否されると、コントローラーは無効なフィールドを返します。これは、フォームを無効にし（parentForm）、他のフィールドレベルエラーを設定するために使用されます。デモでは、amountフィールドでの単純なポスト検証を使用しますが、失敗の原因は返されません。 validateChildFormからの拒否は、アプリケーションが必要とするのと同じくらい複雑または単純です。

Promiseが正常に戻った場合、コマンドはフォームにフィールドの有効性を設定する必要があります。コードは、以前に特定されたサーバーエラーもクリアする必要があります。これにより、指令がユーザーに誤ってエラーを提供しないことが保証されます。すべてのサブフォームが有効である場合、$setValidityのすべてのフィールドをコントローラー内のparentFormにリンクして有効性を設定します。

私たちの見解を設定します< ビューはそれほど複雑ではありません。デモでは、製品を次のフィールドに簡素化しました。名前と量です。次のステップでは、このアプリケーションを完了するために必要なビューを調査します。

ビューコードの概要（製品A）およびここ（製品B）を見つけることができます。

ルートビュー

このビューは、製品指令からロードされたすべての子供フォームをラップするために使用される親フォームをセットアップするため、重要です。

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

ログイン後にコピー

を使用すると、DOMが未使用のng-repeatで誤って満たされないようにします。 ng-if FormController

命令ビュー

注：デモレイアウトに関する上記のビューは、一部の場所で切り捨てられており、この記事とは何の関係もありません。

$scope.formsValid = false;

ログイン後にコピー

上記の

は、Angularのディレクティブを使用します。真実の場合、フィールドは無効になります。 amountInput ビューの下部に、ユーザーが[保存]ボタンをクリックすると、ユーザーにフィードバックを提供するためにすべてのエラーを表示します。これにより、サブフォームにngPatternプロパティが設定されます。 ngDisabled

概要$submitted

すべてのピースをまとめると、次のことがわかります。 GitHub上のすべてのコードも見つけることができます。

結論

私のチームは、最新のアプリを構築するときに多くのことを学びました。父と息子のフォーム関係を理解することで、コメント画面を簡素化することができます。ディレクティブを使用すると、任意のコンテキストで使用できるフォームを開発でき、適切な再利用可能なコードを宣伝できます。また、この指令により、コードをユニットテストして、フォームが予想どおりに機能するようにすることもできます。当社のアプリケーションは生産されており、100,000を超える注文に貢献しています。

この記事を読んで楽しんでいただければ幸いです。ご質問やコメントがある場合は、以下のコメントで聞いてみたいです。 Angularjsのフォームベースの指示

のFAQ

angularjsのフォームベースの指示の役割は何ですか？

AngularJSのフォームベースの指令は、フォームのユーザー入力の管理と検証において重要な役割を果たします。それらは、新しいカスタムウィジェットとして機能するカスタムHTMLタグを作成する方法を提供します。また、アプリケーションに機能を追加する方法でDOMを操作することもできます。これらの命令は、アプリケーション全体で一般的な機能をカプセル化して再利用する場合に特に役立ちます。

angularjsでカスタムフォームベースのディレクティブを作成する方法は？