Angularjsで検証を使用するには？

Question

Angular.jsを使用したフォーム検証で問題が発生しました。

これは私のHTMLコードです：

最初の入力フィールド（つまり、ユーザ名）については

<form class="form-horizontal" name="regForm" novalidate> 
    <div class="form-group" ng-class="{'has-error':regForm.name.$touched && regForm.name.$invalid}"> 
     <label class="control-label col-sm-2">Username:</label> 
     <div class="col-sm-10"> 
      <input class="form-control" type="text" name="name" ng-model="name" placeholder="Enter Username" ng-minlength="5" ng-maxlength="10" required> 
     </div> 
     <div class="help-block" ng-messages="regForm.name.$error" ng-if="regForm.name.$touched"> 
      <p ng-message="minlength">Your name is too short.</p> 
      <p ng-message="maxlength">Your name is too long.</p> 
      <p ng-message="required">Your name is required.</p> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Password:</label> 
     <div class="col-sm-10"> 
      <input class="form-control" type="password" name="pwd" ng-model="pwd" placeholder="Enter Password" ng-pattern="^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$" maxlength="12" > 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Repeat Password:</label> 
     <div class="col-sm-10"> 
      <input class="form-control col-sm-6" type="password" name="num" ng-model="repeat password" placeholder="Repeat password"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Email Address:</label> 
     <div class="col-xs-10"> 
      <input class="form-control col-sm-6" type="email" name="num" ng-model="email" placeholder="Enter Email Address"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-sm-2">Repeat Email Address:</label> 
     <div class="col-xs-10"> 
      <input class="form-control col-sm-6" type="email" name="num" ng-model="repeatemail" placeholder="Repeat Email Address"> 
     </div> 
    </div> 
</form> 

私はNG-のメッセージを使用して検証を試してみましたが、エラーがあります。これは私が名前は小さな手段であれば、私は「あなたの名前が小さすぎる」などのエラーメッセージを取得する必要があり、同様に、私は特定の出力が可能必要

を取得しています出力しました。しかし、名前を入力するときに、一度に3つのエラーメッセージが表示されます。

Answer 1

あなたは、各メッセージが表示させるための条件を指定する必要があります。

<p ng-if="regForm.name.$error.minlength">Your name is too short.</p>

Answer 2

あなたのコードは私のために働いています。あなたはangular-messagesモジュールを持っていないと思います。

まず、ファイルを取得：

GoogleのCDN例えば、角度のドキュメントから//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-messages.js

NPM npm install angular-messages@X.Y.Z

bower install angular-messages#X.Y.Z

次に、あなたのHTMLに角度-messages.jsを含める：

<script src="path/to/angular.js"></script>

<script src="path/to/angular-messages.js"></script>

最後に、依存モジュールとして追加することで、アプリケーション内のモジュール をロードします。

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

これで、あなたは始める準備ができました！