Javascript 一段时间后隐藏angularjs表单验证显示的错误标签
我使用angularjs表单验证进行客户端验证。我需要隐藏标签显示与angularjs错误形式验证方法,3秒后,消息出现后 Html将如下所示Javascript 一段时间后隐藏angularjs表单验证显示的错误标签,javascript,angularjs,validation,angularjs-directive,angularjs-validation,Javascript,Angularjs,Validation,Angularjs Directive,Angularjs Validation,我使用angularjs表单验证进行客户端验证。我需要隐藏标签显示与angularjs错误形式验证方法,3秒后,消息出现后 Html将如下所示 <form name="userForm" novalidate> <div class="form-group"> <label>Name</label> <input type="text" name="name" class="form-control" ng-model="
<form name="userForm" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<label ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</label>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
<label ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</label>
</div>
</form>
app.directive('timeoutHtml', function($timeout) {
return {
restrict: 'A',
scope: {
onVisible: '=showModel'
},
link: function(scope, element, attrs) {
scope.$watch(function() {
return attrs.ngShow;
}, function(newValue, oldValue) {
checkVisibility();
});
function checkVisibility() {
if (element.is(':visible')) {
scope.$watch('onVisible', function(newValue, oldValue) {
console.log(newValue)
if (newValue === true) {
$timeout(function() {
scope.onVisible = false;
}, 2000);
}
});
}
};
}
};
});
名称
你的名字是必需的。
电子邮件
输入有效的电子邮件。
寻找通用解决方案,如自定义指令或其他
提前感谢我创建了这样一个指令
<form name="userForm" novalidate>
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required>
<label ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</label>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email">
<label ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</label>
</div>
</form>
app.directive('timeoutHtml', function($timeout) {
return {
restrict: 'A',
scope: {
onVisible: '=showModel'
},
link: function(scope, element, attrs) {
scope.$watch(function() {
return attrs.ngShow;
}, function(newValue, oldValue) {
checkVisibility();
});
function checkVisibility() {
if (element.is(':visible')) {
scope.$watch('onVisible', function(newValue, oldValue) {
console.log(newValue)
if (newValue === true) {
$timeout(function() {
scope.onVisible = false;
}, 2000);
}
});
}
};
}
};
});
把html改成了这个
<form name="userForm" novalidate="">
<div class="form-group">
<label>Name</label>
<input type="text" name="name" class="form-control" ng-model="name" required="" />
<label timeout-html="" show-model="submitted" ng-show="userForm.name.$invalid && submitted" class="help-block">You name is required.</label>
</div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" ng-model="email" required />
<label ng-show="userForm.email.$invalid && submitted" class="help-block">Enter a valid email.</label>
</div>
<button type="submit" ng-click="submitted=true;">Submit</button>
</form>
名称
你的名字是必需的。
电子邮件
输入有效的电子邮件。
提交
Plunker演示:那么在加载表单3秒后隐藏错误消息?或者信息出现的时间?或者其他什么?在消息出现后,建议在angularJS()中使用$timeout函数,超时时间为3秒,然后使用ng show或ng hide隐藏标签。