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