如何使用指令驗證輸入自定義？

Question

我做了以下指令：

.directive('checkValueTypeArray', function() { 
    return { 
     restrict: 'A', 
     require: 'ngModel', 
     scope: { 
      typeElement: '=', 
      typeValue: '=' 
     }, 
     link: function (scope, element, attrs, ngModel) { 

      var type_value = scope.typeValue; 

      ngModel.$validators.required = function (v) { 

       switch (type_value) { 

        case "integer": 
         status = isInt(v); 
         break; 

        case "string": 
         status = isNaN(v); 
         break; 

        case "object": 
         status = true; 
         break; 

        case "array": 
        case "array_objects": 
         status = true; 
         break; 

        case "boolean": 
         status = (v === "true" || v === "false"); 
         break; 

        case "float": 
         status = isNumeric(v); 
         break; 

        case "vector2": 
         status = (v.length === 2); 
         break; 

        case "vector3": 
         status = (v.length === 3); 
         break; 
       } 

       return status; 
      }; 
     } 
    }; 
}) 

並調用這個指令類似如下：

<input 
    ng-required="true" 
    check-value-type-array 
    type-value="node.type_value" 
    type-element="node.type" 
    ng-value="item" 
    class="form-control" 
    ng-change="changeArrayValue(inputValue, $index, node, $parent.$index)" 
    ng-model="inputValue" type="text" 
    placeholder="Value ($$node.type_value$$)" 
> 

問題是，如果status假的，它沒有輸入字段錯誤（彩色）。

所以，它不適合我。當我看到DOM Chrome中的輸入時，我看到了孤立的模型。

Answer 1

我假設你需要添加一個$observe：

看一看從angular.js源ngRequired指令：

var requiredDirective = function() { 
    return { 
    restrict: 'A', 
    require: '?ngModel', 
    link: function(scope, elm, attr, ctrl) { 
     if (!ctrl) return; 
     attr.required = true; // force truthy in case we are on non input element 

     ctrl.$validators.required = function(modelValue, viewValue) { 
     return !attr.required || !ctrl.$isEmpty(viewValue); 
     }; 

     attr.$observe('required', function() { 
     ctrl.$validate(); 
     }); 
    } 
    }; 
};