Javascript 在模糊/聚焦事件上使用$validator

现在，在我的验证指令中，我将验证状态设置为“手动”，如下所示：

$element.on('focus', function() {
    $scope.$apply(function() {
       ngModelCtrl.$setValidity('length', true);
    });
 });

 $element.on('blur', function() {
    $scope.$apply(function() {
        if (ngModelCtrl.$modelValue && ngModelCtrl.$modelValue.length === +$attrs.maxlength) {
            ngModelCtrl.$setValidity('length', true);
        }      
        else if (ngModelCtrl.$modelValue.length < +$attrs.maxlength && ngModelCtrl.$modelValue.length > 0) {
            ngModelCtrl.$setValidity('length', false);
        }
     }
 });

$element.on（'focus'，function（））{
$scope.$apply（函数（）{
ngModelCtrl.$setValidity（'length'，true）；
});
});
$element.on（'blur'，function（）{
$scope.$apply（函数（）{
if（ngModelCtrl.$modelValue&&ngModelCtrl.$modelValue.length===+$attrs.maxlength）{
ngModelCtrl.$setValidity（'length'，true）；
}      
else if（ngModelCtrl.$modelValue.length<+$attrs.maxlength&&ngModelCtrl.$modelValue.length>0）{
ngModelCtrl.$setValidity（'length'，false）；
}
}
});

但是我想使用

$validators

和保存验证行为（在模糊/聚焦事件上）设置验证状态

我无法将

ng model options

与

updateOn:'blur'

一起使用

---

是否有其他选项可以执行此操作？

因此，要使用自定义验证器，您需要稍微改变指令的结构。主要区别在于您需要

ngModel

指令

return {
     require: 'ngModel',
     link: function(scope, element, attrs, ngModel) {
        // Run validator for maxLenth
        ngModel.$validators.customMaxLength = function(value) { 
          var status = false;
            if(value.length <= attrs.maxLengthValidator) {
              console.log(attrs.maxLengthValidator);
            status = true;
          }
              return status;
        };
    }
  }

    scope.$watch(function() {
        return attrs.maxLengthValidator;    
    },function() {
        ngModel.$validate();
    });

如果验证器返回false，则表单将自动将

$valid

设置为

false

HTML

在下面的例子中，我使用角度信息来显示有效的输出。这是一个需要包含的可选模块

<form name="myForm">
    <div class="form-group" ng-class="{'has-error':myForm.testField.$invalid}">
      <label class="control-label" for="testInput">Test Field</label>
      <input class="form-control" type="text" name="testField"  
        max-length-validator="3" required ng-model="testField"/>
    </div>
</form>

    <div ng-messages ng-messages-multiple class="bg-danger" for="myForm.testField.$error">
                <div ng-message when="required">Please enter value</div>
                <div ng-message when="customMaxLength">To Long</div>
    </div>

然后使用

ng class

、

ng show

或

ng hide

检查更新显示

---

这已经添加到plnkr中了。$validators

您不使用

ngModel有什么原因吗。$validators

？我想使用

ngModel。$validators

，但我不知道如何重复相同的验证行为。我需要一些示例非常有用的答案，谢谢！但是，您能用模糊/聚焦验证的示例更新您的plnkr吗？然后我可以当然。@Salasar，你只想在他们离开字段时显示错误吗？Malkus，是的，如果字段被删除，我想隐藏它focus@Salasar，我更新了答案，以帮助您了解您的具体问题Malkus，这是正确的答案，非常感谢！

ng-focus="myForm.testField.focus=true" ng-blur="myForm.testField.focus=false"