2016-07-15 7 views
0

私はngMessagesで作業フォームを持っています。AngularJSの妥当性検査のエラー

私の問題は、フォームを表示して空にすると、ユーザーが入力にフォーカスを当てたときにのみ、エラーを表示したくないということです。

これは可能ですか?

+0

'ngMessages'で動作する場合、' ng-blur = function() 'を使うことができます。 – Sajal

答えて

0

使用$touched

スニペット:複数のチェックhereについては

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

 
app.controller('mainCtrl', function($scope) { 
 
    // Any JS Code 
 
});
<!DOCTYPE html> 
 
<html ng-app="app"> 
 

 
<head> 
 
    <script src="https://code.angularjs.org/1.5.7/angular.js"></script> 
 
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" /> 
 
    <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script> 
 
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
    <script src="https://code.angularjs.org/1.4.7/angular-messages.js"></script> 
 
</head> 
 

 
<body ng-controller="mainCtrl"> 
 
    <form role="form" name="form" novalidate> 
 
    <div class="col-md-12"> 
 
     <div class="form-group" ng-class="{ 'has-error' : form.email.$touched && form.email.$invalid }"> 
 
     <label>Name</label> 
 
     <input type="email" name="email" class="form-control" placeholder="Name" ng-model="email" required> 
 
     <div class="help-block" ng-messages="form.email.$error" ng-if="form.email.$touched"> 
 
      <p ng-message="required">This field is required</p> 
 
      <p ng-message="minlength">This field is too short</p> 
 
      <p ng-message="maxlength">This field is too long</p> 
 
      <p ng-message="required">This field is required</p> 
 
      <p ng-message="email">This needs to be a valid email</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</body> 
 

 
</html>

私はそれが助けてくれることを願っています!

+0

こんにちは、あなたのソリューションと非常によく似たソリューションが見つかりました。唯一の違いは$ dirtyを使うことです。それは私の意見ではより良いアプローチです。 – domoindal

+0

あなたは言った:* "私の問題は、フォームを表示して空にしたときに、ユーザーが入力を集中しているときだけ、エラーを表示したくないということです。言い換えれば、フォーカスを失ったときにエラーメッセージを**表示**したいだけなので、 '$ dirty'はあなたが探しているものではありません。 '$ dirty'はユーザーが' 'に何かを入力したのと同じ瞬間にメッセージを表示するために使われ、' $ touched'はあなたが探しているものです(フォーカスを失ったときだけ表示します)。 – developer033

関連する問題