Question

现在，在我的验证指令中，我手动设置验证状态＆＃39;，如下所示：

$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

<强> HTML

在下面的示例中，我使用angular-messages显示有效输出。这是一个需要包含的可选模块。

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

Custom Validator Example

关于在模糊时触发验证器的问题

如果模型值无效，您真的不想更新ngModel。

我建议使用样式和焦点属性与字段根据字段的焦点切换显示。

在输入字段中添加以下内容

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

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

已添加到plnkr

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

1 个答案:

关于在模糊时触发验证器的问题