How to disable trimming of inputs in AngularJS?

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.$watch('text', function (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.



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>

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']);


You can enable/disable trim option by using ng-trim=true/false. Ref


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.