How to disable trimming of inputs in AngularJS?

Question

I've found some strange behavior: angular trims model values by default. And quick googling doesn't help me to solve this problem. I've found ng-no-trim directive proposals, ng-trim and so on. But nothing works.

I've provided a little snippet that represents this issue below.

function Ctrl($scope) {
  $scope.text='';

  $scope.$watch('text', function (newValue) {
    console.log(newValue);
  });
}

Also you could try this snippet here.

I've added a textarea that is in sync with model text. But it doesn't react for watching when add new trailing spaces or break the line to new one.

What could I do to turn off this behavior? Thanks.

Answer 1

The directive in question is new in 1.1.1; you can see it working using JS Bin snippet.

<textarea cols="30" rows="10" ng-model="text" ng-trim="false"></textarea>

Answer 2

Fallback for angular 1.0.x

var app = angular.module('app', []);

app.directive('ngTrim', function() {
    return {
        require: 'ngModel',
        priority: 300,
        link: function(scope, iElem, iAttrs, ngModel) {
            if (iAttrs.ngTrim === 'false') {
                // Be careful here. We override any value comming from the previous
                // parsers to return the real value in iElem
                ngModel.$parsers.unshift(function() {
                    return iElem.val();
                });
            }
        }
    }
});

angular.bootstrap(document, ['app']);

http://jsfiddle.net/vXCnj/3/

Answer 3

You can enable/disable trim option by using ng-trim=true/false. Ref https://docs.angularjs.org/api/ng/input/input%5Btext%5D