filtry na ng-model na wejściu

Uważam, że intencją wejścia AngularJS i ngModel jest to, że nieprawidłowe wejście nigdy nie powinno skończyć się w modelu. Model powinien być zawsze ważny. Problem z nieprawidłowym modelem polega na tym, że możemy mieć obserwatorów, którzy odpalają i podejmują (niewłaściwe) działania w oparciu o nieprawidłowy model.

Jak widzę, właściwym rozwiązaniem jest podłączenie do $parsers potoku i upewnienie się, że nieprawidłowe dane wejściowe nie trafią do modelu. Nie wiem, jak próbowałeś. podejście rzeczy lub co dokładnie nie działa dla ciebie z $parsers ale tutaj jest prosta dyrektywa, która rozwiązuje twój problem (a przynajmniej moje zrozumienie problemu): {]}

app.directive('customValidation', function(){
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {

       modelCtrl.$parsers.push(function (inputValue) {

         var transformedInput = inputValue.toLowerCase().replace(/ /g, ''); 

         if (transformedInput!=inputValue) {
           modelCtrl.$setViewValue(transformedInput);
           modelCtrl.$render();
         }         

         return transformedInput;         
       });
     }
   };
});

Jak tylko powyższa dyrektywa zostanie zadeklarowana, może być użyta w następujący sposób:

<input ng-model="sth" ng-trim="false" custom-validation>

Tak jak w rozwiązaniu zaproponowanym przez @ Valentyn Shybanov, musimy użyć dyrektywy ng-trim, jeśli chcemy zablokować spacje na początku / końcu wejścia.

Zaletą tego podejścia jest 2-krotność:

• Invalid wartość nie jest propagowana do modelu
• używając dyrektywy, łatwo jest dodać tę niestandardową walidację do dowolnego wejścia bez powielania obserwatorów w kółko

Rozwiązaniem tego problemu może być zastosowanie filtrów po stronie kontrolera:

$scope.tags = $filter('lowercase')($scope.tags);

Nie zapomnij zadeklarować $filter jako zależności.

Użyj dyrektywy, która dodaje do kolekcji $formatters i $ parsers, aby upewnić się, że transformacja jest wykonywana w obu kierunkach.

Zobacz ta inna odpowiedź Aby uzyskać więcej szczegółów, w tym link do jsfiddle.

Miałem podobny problem i używałem

ng-change="handler(objectInScope)" 

W moim programie obsługi wywołuję metodę objectInScope, aby zmodyfikować się poprawnie (gruboziarniste wejście). W kontrolerze zainicjowałem gdzieś, że

$scope.objectInScope = myObject; 

Wiem, że to nie używa żadnych fantazyjnych filtrów lub obserwatorów... ale to proste i działa świetnie. Jedynym powodem tego jest to, że obiektinscope jest wysyłany w wywołaniu do obsługi...

Jeśli używasz pola tylko do odczytu, możesz użyć ng-value z filtrem.

Na przykład:

ng-value="price | number:8"

Możesz spróbować tego

$scope.$watch('tags ',function(){

    $scope.tags = $filter('lowercase')($scope.tags);

});

Jeśli wykonujesz skomplikowaną, asynchroniczną walidację wejściową, może być warto abstrakcyjnie ng-model podnieść poziom o jeden poziom jako część niestandardowej klasy z własnymi metodami walidacji.

Https://plnkr.co/edit/gUnUjs0qHQwkq2vPZlpO?p=preview

Html

<div>

  <label for="a">input a</label>
  <input 
    ng-class="{'is-valid': vm.store.a.isValid == true, 'is-invalid': vm.store.a.isValid == false}"
    ng-keyup="vm.store.a.validate(['isEmpty'])"
    ng-model="vm.store.a.model"
    placeholder="{{vm.store.a.isValid === false ? vm.store.a.warning : ''}}"
    id="a" />

  <label for="b">input b</label>
  <input 
    ng-class="{'is-valid': vm.store.b.isValid == true, 'is-invalid': vm.store.b.isValid == false}"
    ng-keyup="vm.store.b.validate(['isEmpty'])"
    ng-model="vm.store.b.model"
    placeholder="{{vm.store.b.isValid === false ? vm.store.b.warning : ''}}"
    id="b" />

</div>

Kod

(function() {

  const _ = window._;

  angular
    .module('app', [])
    .directive('componentLayout', layout)
    .controller('Layout', ['Validator', Layout])
    .factory('Validator', function() { return Validator; });

  /** Layout controller */

  function Layout(Validator) {
    this.store = {
      a: new Validator({title: 'input a'}),
      b: new Validator({title: 'input b'})
    };
  }

  /** layout directive */

  function layout() {
    return {
      restrict: 'EA',
      templateUrl: 'layout.html',
      controller: 'Layout',
      controllerAs: 'vm',
      bindToController: true
    };
  }

  /** Validator factory */  

  function Validator(config) {
    this.model = null;
    this.isValid = null;
    this.title = config.title;
  }

  Validator.prototype.isEmpty = function(checkName) {
    return new Promise((resolve, reject) => {
      if (/^\s+$/.test(this.model) || this.model.length === 0) {
        this.isValid = false;
        this.warning = `${this.title} cannot be empty`;
        reject(_.merge(this, {test: checkName}));
      }
      else {
        this.isValid = true;
        resolve(_.merge(this, {test: checkName}));
      }
    });
  };

  /**
   * @memberof Validator
   * @param {array} checks - array of strings, must match defined Validator class methods
   */

  Validator.prototype.validate = function(checks) {
    Promise
      .all(checks.map(check => this[check](check)))
      .then(res => { console.log('pass', res)  })
      .catch(e => { console.log('fail', e) })
  };

})();