szűrők ng-modell egy bemenetben

Azt javaslom, hogy nézze meg a modell értékét, és frissítse a változás után: http://plnkr.co/edit/Mb0uRyIIv1eK8nTg3Qng?p=preview

Az egyetlen érdekes probléma a szóközökkel van: Az AngularJS 1.0.3-ban az ng-model a bemeneten automatikusan levágja a karakterláncot, így nem észleli, hogy a modell megváltozott, ha szóközt ad hozzá a végén vagy az elején (így a szóközöket nem távolítja el automatikusan kód). Az 1.1.1-es verzióban azonban van egy „ng-trim” direktíva, amely lehetővé teszi ennek a funkciónak a letiltását (commit) . Ezért úgy döntöttem, hogy az 1.1.1-et használom a kérdésében leírt pontos funkcionalitás eléréséhez.

Úgy gondolom, hogy az AngularJS bemenetek és a ngModel irányelv célja az, hogy az érvénytelen bemenet soha ne kerüljön a modellbe. A modellnek mindig érvényesnek kell lennie. Az érvénytelen modellel az a probléma, hogy lehetnek megfigyelőink, akik az érvénytelen modell alapján tüzelnek és (nem megfelelő) műveleteket hajtanak végre.

Ahogy én látom, a megfelelő megoldás itt az, ha csatlakoztatjuk a $parsers csővezetéket, és megbizonyosodunk arról, hogy az érvénytelen bemenet ne kerüljön be a modellbe. Nem tudom, hogyan próbáltad megközelíteni a dolgokat, vagy pontosan mi az, ami nem működött neked a $parsers használatával, de itt van egy egyszerű direktíva, amely megoldja a problémádat (vagy legalábbis a probléma megértését):

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;         
       });
     }
   };
});

Amint a fenti direktíva deklarálva van, a következőképpen használható:

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

A @Valentyn Shybanov által javasolt megoldáshoz hasonlóan a ng-trim direktívát kell használnunk, ha meg akarjuk tiltani a szóközöket a bemenet elején/végén.

Ennek a megközelítésnek az előnye kettős:

• Érvénytelen érték nem kerül a modellbe
• Egy direktíva használatával könnyen hozzáadható ez az egyéni érvényesítés bármely bemenethez anélkül, hogy a megfigyelőket újra és újra megkettőzné

A probléma megoldása a vezérlőoldali szűrők alkalmazása lehet:

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

Ne felejtse el deklarálni a $filter-t függőségként.

Ha csak olvasható beviteli mezőt használ, használhatja az ng-értéket szűrővel.

például:

ng-value="price | number:8"

Használjon olyan direktívát, amely hozzáadja a $formaters és $parsers gyűjteményt is, hogy biztosítsa az átalakítás mindkét irányban történő végrehajtását.

Tekintse meg ezt a másik választ további részletekért, beleértve a jsfiddle linket.

Nekem is volt hasonló problémám és használtam

ng-change="handler(objectInScope)" 

a kezelőmben meghívom az objectInScope metódusát, hogy helyesen módosítsa magát (durva bemenet). A vezérlőben valahol ezt kezdeményeztem

$scope.objectInScope = myObject; 

Tudom, hogy ez nem használ semmiféle divatos szűrőt vagy figyelőt... de egyszerű és nagyszerűen működik. Ennek egyetlen hátránya, hogy az objectInScope a hívásban elküldésre kerül a kezelőnek...

Ha összetett, aszinkron bemeneti ellenőrzést végez, érdemes lehet ng-model egy szinttel feljebb absztrahálni egy egyéni osztály részeként, saját érvényesítési módszerekkel.

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>

kód

(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) })
  };

})();

Ezt kipróbálhatod

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

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

});