ngModel.$parsers ingore whitespace at the end of ng-model value

angularjs, angularjs-directive, javascript, validation

Solution

Try this in your template:

<form name="something" novalidate>
  <input ng-model="myValue" no-whitespace ng-trim="false"/>
  <div ng-show="something.myValue.$error.whitespace">
    Error
  </div>
</form>

That should solve the issue of ng-model not updating when you enter empty space.

EDIT: Derp, the attribute goes in the input element not in the div ...

Problem

I have directive like this: ``` .directive('noWhitespace', ['$parse', function($parse) { return { restrict: 'A', require: 'ngModel', link: function (scope, element, attrs, ngModel) { /* scope.$watch(attrs.ngModel, function(value) { var getter = $parse(value); update(getter(scope)); }); */ function update(viewValue) { console.log(JSON.stringify(viewValue)); if (viewValue.match(/\s/)) { ngModel.$setValidity('whitespace', false); return undefined; } else { ngModel.$setValidity('whitespace', true); return viewValue; } } ngModel.$parsers.unshift(update); } }; }]) ``` and when I use it like this: ``` <form name="something" novalidate> <input ng-model="myValue" no-whitespace/> <div ng-show="something.myValue.$error.whitespace"> Error </div> </form> ``` and I type something and then few spaces at the end `update` is not called until I type character after those spaces and then I got error that I have whitespace. (the same happen when I put spaces at the begining or only spaces). Why is that, and how to fix it? As you see in comments I've try to use `$watch+$parse` but got error `Cannot read property 'match' of undefined`.

Original source