AngularJSは、バリデーションチェックでエラー表示する事ができますが
そのエラー表示を数秒後、自動的に非表示にする事ができるのでしょうか?
もし出来るのあれば方法を教えてください。
スタック・オーバーフローはプログラマーとプログラミングに熱心な人のためのQ&Aサイトです。すぐ登録できます。
登録してこのコミュニティに参加するAngularでDOM操作をするならカスタムディレクティブを作りましょう。
以下は、入力が8文字を超えるとエラーを表示し、2秒後に非表示にするサンプルです。
アニメーションにjQueryを使用しています。
angular.module('app', [])
.controller('formController', function($scope){
$scope.maxlength = 8;
})
.directive('fadeOutMessage', function(){
return {
scope: {
show: '=',
message: '@'
},
template: '<div style="color:red">{{message}}</div>',
link: function(scope, elem, attrs){
var $div = elem.find('div');
$div.hide();
scope.$watch('show', function(newVal){
if(newVal){
$div.show()
.delay(1000)
.fadeOut(1000);
}
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
<body ng-app="app">
<form name="form" ng-controller="formController">
<p>maxlength: {{maxlength}}</p>
<label>Your name</label>
<input type="text" name="name" ng-maxlength="maxlength"ng-model="name" />
<fade-out-message show="form.name.$error.maxlength" message="Too long"></fade-out-message>
</form>
</body>