在模糊/焦点事件上使用$ 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;
        };
    }
  }

重要注意事项。 如果使用属性进行验证，并且值可以更改，则需要监视值并手动运行in的验证函数。 由于模型未更改，因此验证程序不会自动触发。

将以下内容添加到指令中

    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>

自定义验证器示例

---

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

如果模型值无效，则您实际上并不想更新ngModel。

我建议在字段中使用样式和focus属性，以基于字段的焦点切换显示。

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

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

然后使用ng-class ， ng-show或ng-hide进行检查以更新显示。

这已添加到plnkr