Javascript 一段时间后隐藏angularjs表单验证显示的错误标签

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="

我使用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="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隐藏标签。