[解決済み] AngularJSのフォームにカスタム検証を追加するには？

質問

入力フィールドを持つフォームがあり、バリデーションを設定するために required 属性などがあります。しかし、いくつかのフィールドでは、追加のバリデーションを行う必要があります。このような場合、どのようにすればよいのでしょうか？ FormController を制御できますか？

カスタムバリデーションは、「これら3つのフィールドが入力されている場合、このフィールドは必須であり、特定の方法でフォーマットする必要があります」のようなものにすることができます。

にメソッドがあります。 FormController.$setValidity が、これは公開APIではなさそうなので、むしろ使わない方がいい。カスタムディレクティブを作成し NgModelController は別の選択肢のように見えますが、基本的にはカスタム検証ルールごとにディレクティブを作成する必要があり、私はそれを望んでいません。

実際、コントローラからフィールドを無効とマークすることで、(同時に FormController を同期させる）ことが、最も単純なシナリオで必要なことかもしれませんが、その方法がわかりません。

どのように解決するのですか？

編集：以下にngMessages (>= 1.3.X)についての情報を追加しました。

標準的なフォーム検証メッセージ (1.0.X 以降)

現在、"Angular Form Validation"でググるとこれが上位に来るので、そこから入ってくる人のために、もう一つ回答を追加しておきたいと思います。

FormController.$setValidityにメソッドがありますが、これは公開APIではないようなので、むしろ使わない方がいいと思います。

public"です、ご心配なく。安心して使ってください。そのためにあるのですから。もし使われることを意図していないのであれば、Angularの開発者はクローズで私有化したことでしょう。

カスタムバリデーションを行うには、他の回答が提案したようにAngular-UIを使いたくなければ、単に独自のバリデーションディレクティブをロールバックすればいいのです。

app.directive('blacklist', function (){ 
   return {
      require: 'ngModel',
      link: function(scope, elem, attr, ngModel) {
          var blacklist = attr.blacklist.split(',');

          //For DOM -> model validation
          ngModel.$parsers.unshift(function(value) {
             var valid = blacklist.indexOf(value) === -1;
             ngModel.$setValidity('blacklist', valid);
             return valid ? value : undefined;
          });

          //For model -> DOM validation
          ngModel.$formatters.unshift(function(value) {
             ngModel.$setValidity('blacklist', blacklist.indexOf(value) === -1);
             return value;
          });
      }
   };
});

そして、使用例です。

<form name="myForm" ng-submit="doSomething()">
   <input type="text" name="fruitName" ng-model="data.fruitName" blacklist="coconuts,bananas,pears" required/>
   <span ng-show="myForm.fruitName.$error.blacklist">
      The phrase "{{data.fruitName}}" is blacklisted</span>
   <span ng-show="myForm.fruitName.$error.required">required</span>
   <button type="submit" ng-disabled="myForm.$invalid">Submit</button>
</form>

注：1.2.Xでは、おそらく、以下のように代用するのが望ましいでしょう。 ng-if に対して ng-show 上記

ここで、義務として プランカーリンク

また、このテーマについて、もう少し詳しく書いたブログエントリーがあります。

Angular フォームバリデーション

カスタム検証ディレクティブ

編集：1.3.XでngMessagesを使用する

ngShow の代わりに ngMessages モジュールを使ってエラーメッセージを表示することができるようになりました。エラーメッセージである必要はありませんが、ここでは基本的なことを説明します。

1. 以下を含む <script src="angular-messages.js"></script>

2. 参考資料 ngMessages をモジュール宣言に追加してください。

   var app = angular.module('myApp', ['ngMessages']);
   
   

3. 適切なマークアップを追加します。

   <form name="personForm">
     <input type="email" name="email" ng-model="person.email" required/>
   
     <div ng-messages="personForm.email.$error">
       <div ng-message="required">required</div>
       <div ng-message="email">invalid email</div>
     </div>
   </form>
   
   

上記のマークアップでは ng-message="personForm.email.$error" のコンテキストを指定します。 ng-message 子ディレクティブを使用します。次に ng-message="required" と ng-message="email" は、監視するコンテキストのプロパティを指定します。 最も重要なことは、それらをチェックする順序も指定することです。 . そして、最初に見つかった真実のメッセージが表示され、他のメッセージは表示されません。

そして ngMessagesの例では、プランカを使用します。