私はngMessagesで作業フォームを持っています。AngularJSの妥当性検査のエラー
私の問題は、フォームを表示して空にすると、ユーザーが入力にフォーカスを当てたときにのみ、エラーを表示したくないということです。
これは可能ですか?
私はngMessagesで作業フォームを持っています。AngularJSの妥当性検査のエラー
私の問題は、フォームを表示して空にすると、ユーザーが入力にフォーカスを当てたときにのみ、エラーを表示したくないということです。
これは可能ですか?
使用$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>
。
私はそれが助けてくれることを願っています!
こんにちは、あなたのソリューションと非常によく似たソリューションが見つかりました。唯一の違いは$ dirtyを使うことです。それは私の意見ではより良いアプローチです。 – domoindal
あなたは言った:* "私の問題は、フォームを表示して空にしたときに、ユーザーが入力を集中しているときだけ、エラーを表示したくないということです。言い換えれば、フォーカスを失ったときにエラーメッセージを**表示**したいだけなので、 '$ dirty'はあなたが探しているものではありません。 '$ dirty'はユーザーが' 'に何かを入力したのと同じ瞬間にメッセージを表示するために使われ、' $ touched'はあなたが探しているものです(フォーカスを失ったときだけ表示します)。 – developer033
'ngMessages'で動作する場合、' ng-blur = function() 'を使うことができます。 – Sajal