ボタンを使用したng-messages検証

Question

ボタンクリックに基づいてng-messageを使用する方法を理解しようとしています。私が見つけたドキュメントのほとんどは、ボタンではなく入力に基づいてエラーメッセージを自動的に表示します。ボタンをクリックした後にメッセージが表示されるように変更するにはどうすればよいですか。ここに私のコードは、あなたがngIfとフォームコントローラ上で$提出フラグを使用することができます

<div ng-controller="userController"> 
    <div class=user> 
     <form name="login"> 
      <h2 class>Login</h2> 
      <h3 class = "login_page">UserName</h3> 
      <input ng-model="user" type="text" ng-minlength="1" required> 
      <h3 class = "login_page">Password</h3> 
      <input ng-model="password" type="password" name="password" ng-minlength="4" required> 
      <input type="submit" value="Login" ng-click="login()" > 
      <div ng-messages="login.password.$error" style="color:maroon" role="alert"> 
       <div ng-message="required">You did not enter a field</div> 
       <div ng-message="minlength">Your field is too short</div> 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

です：

<div ng-if="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert"> 
    <div ng-message="required">You did not enter a field</div> 
    <div ng-message="minlength">Your field is too short</div> 
</div> 

Answer 2

あなたがにこれを追加ng-form

の$submittedプロパティを使用して、角度のng-showディレクティブを使用することができますあなたのコードng-show="login.$submitted"

<input type="submit" value="Login" ng-click="login()" > 
    <div ng-show="login.$submitted" ng-messages="login.password.$error" style="color:maroon" role="alert"> 
     <div ng-message="required">You did not enter a field</div> 
     <div ng-message="minlength">Your field is too short</div> 
    </div> 

あなたは働くフィドルhereを見ることができます。これは

---

または代わりに、この

<div ng-messages="login.password.$error" style="color:maroon" role="alert"> 
     <div ng-show="login.$submitted" ng-message="required">You did not enter a field</div> 
     <div ng-show="login.$submitted" ng-message="minlength">Your field is too short</div> 
    </div> 

などの各メッセージに番組を追加するのに役立ちます願っています