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.

Daniel · Accepted Answer · 2014-05-27 18:18:51Z

99

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>

edited May 27, 2014 at 18:18

Daniel

9221 gold badge11 silver badges22 bronze badges

answered Feb 19, 2013 at 13:26

Michelle Tilley

159k40 gold badges379 silver badges312 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ValeriiVasin Over a year ago

Thanks a lot. I've included 1.1.1 version and now it works great.

Michelle Tilley Over a year ago

No problem. Perhaps worth noting is that 1.1.2 is currently the latest unstable.

ValeriiVasin Over a year ago

Could you tell me one more thing. I've added ng-trim='false' and when I type inside the textarea I need to duplicate it's content in some div, but replace '\n' with br. But my replacement doesn't work. BR is inserted only after I've typed one more char at new line. Any thoughts? Example: jsbin.com/ibosub/12/edit

Shuhei Kagawa Over a year ago

@InviS String.prototype.replace() with a string parameter replaces only once. Use regexp for multiple replacements. $scope.clone = $scope.text.replace(/\n/g, '<br />');

Francis · Accepted Answer · 2014-05-12 17:22:18Z

3

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/

answered May 12, 2014 at 17:22

Francis

3,40324 silver badges47 bronze badges

Comments

Vivek Panday · Accepted Answer · 2016-04-03 18:39:30Z

3

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

answered Apr 3, 2016 at 18:39

Vivek Panday

1,4462 gold badges17 silver badges34 bronze badges

2 Comments

Martyn Chamberlin Over a year ago

Good to know. Never heard of this directive before!

Vivek Panday Over a year ago

For me it was new too @MartynChamberlin

Collectives™ on Stack Overflow

How to disable trimming of inputs in AngularJS?

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related