在模糊/焦点事件中使用$validators

Question

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

$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);
        }
     }
 });

但是我想用$validators设置验证状态，并保存验证行为(在模糊/焦点事件上)。

我不能把ng-model-options和updateOn: 'blur'结合使用。

还有其他选择吗？

Answer 1

因此，要使用自定义验证器，需要稍微改变指令的结构。主要的区别是您需要要求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

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

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

自定义Validator示例

关于你关于在模糊上发射验证器的问题

如果模型值无效，您实际上不希望更新ngModel。

我建议的是在字段中使用样式和一个focus属性来根据字段的焦点切换显示。

向输入字段添加如下内容

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

然后使用检查与ng-class，ng-show或ng-hide更新您的显示器。

这已添加到plnkr中。