AngularJsの入力フィールドとフィルタの問題があるngモデル

Question

私はいくつかの入力フィールドを持っています。私は空白だけであればユーザー入力を検証したいと思います。私はディレクティブまたはフィルタで試してみます。私は入力フィールドが多すぎるので$ watchを使用しないことを好みます。私が必要とするのは、ユーザーが入力フィールドに空白だけを設定して、この空白を消去する関数またはディレクティブを設定した場合です。 私はこれをjQueryまたはvanilla JSで行うことができますが、私はこの結果が角度のある方が望ましいです。

angular.module('app') 
.directive('customSpaceValidation', ['$filter', function ($filter) { 
    return { 
     require: '?ngModel', 
     link: function (scope, elem, attrs, ctrl) { 
      if (!ctrl.replace(/\s/g, '').length) { 
       ctrl = ""; 
      } 
      return ctrl; 
     } 
    }; 
}]) 
.filter('nospace', function() { 
    return function (value) { 
     if (!value.replace(/\s/g, '').length) { 
      value = ""; 
     } 
     return value; 
    }; 
}) 

これはHTMLディレクティブを使用することです：：これは私のコードであるディレクティブまたはフィルタ

中I`mが間違っ

は

<input type="text" class="form-control" id="inputKey" ng-model="channel.key" customSpaceValidation data-ng-trim="false" ng-required="true" name="inputKey" required /> 

これは、フィルタ

とhtmlです

<input type="text" class="form-control" id="inputKey" ng-model="channel.key | filter : nospace" data-ng-trim="false" ng-required="true" name="inputKey" required /> 

Filt ERトロウ例外：

ng-table-export.src.js:45 TypeError: ngModelSet is not a function 
at NgModelController.$$writeModelToScope (ng-table-export.src.js:45) 
at writeToModelIfNeeded (ng-table-export.src.js:45) 
at ng-table-export.src.js:45 
at validationDone (ng-table-export.src.js:45) 
at processAsyncValidators (ng-table-export.src.js:45) 
at NgModelController.$$runValidators (ng-table-export.src.js:45) 
at NgModelController.$$parseAndValidate (ng-table-export.src.js:45) 
at NgModelController.$commitViewValue (ng-table-export.src.js:45) 
at ng-table-export.src.js:45 
at Scope.$eval (ng-table-export.src.js:45) 

Answer 1

フィルタリングが片方向操作であるため、ng-modelが双方向結合しているときに、フィルタでng-modelを使用することはできません。この指示文は、HTMLで使用される場合はキャメルケースの代わりにスネークケースにする必要があります（custom-space-validation）。実際に検証するために

、あなたがバリ必要があります。

.directive('customSpaceValidation', [function() { 
    var RE = /^\s+$/; 

    return { 
     require: 'ngModel', 
     link: function (scope, elem, attrs, ngModel) { 
      ngModel.$validators['customSpace'] = function(modelValue, viewValue) { 
       var value = modelValue || viewValue; 
       return !RE.test(value); 
      }; 
     } 
    }; 
}])