5

Is there any way prevent angular from auto trim for fields in the whole application? I know that I can prevent it for specified field using ngTrim directive, but it doesn't look good add this directive to all text fields in the application, is there any way do it for all fields in the angular module? Here is code, if you add add spaces in the begin of input they will not appear in label:

<div ng-app>
  <div ng-controller="TodoCtrl">
      {{field}}
    <input type="text" ng-model="field">
  </div>
</div>
6
  • Can you give an example of your code? Difficult to tell what you're referring to.
    – adamjld
    May 29, 2015 at 15:34
  • Why can not trim? Maybe there is a better solution than simply disable ngTrim. May 29, 2015 at 15:42
  • Looking at the code (1.3.15) there seems to be no way - do a search for ngTrim! I did not expect this! May 29, 2015 at 15:43
  • because fields in database contains spaces in the beginning, and need compare them.
    – roman-v1
    May 29, 2015 at 15:44
  • 1
    You can trim the databases fields for comparison? May 29, 2015 at 15:48

2 Answers 2

6

You can extend input[text] directive, the code below will automatically change the value of the attribute ngTrim to false:

.directive('input', function($compile){
    // Runs during compile
    return {
      link(scope, iElement, iAttrs) {
        if (iElement.attr('type') === 'text') {
          iAttrs.$set('ngTrim', "false");
        }
      }
    };
});

Reference: https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-text-input-directive</title>
  

  <script src="https://docs.angularjs.org/angular.min.js"></script>
  

  
</head>
<body ng-app="textInputExample">
  <script>
  angular.module('textInputExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.example = {
        text: 'guest'
      };
    }])
    .directive('input', function($compile){
        // Runs during compile
        return {
          link(scope, iElement, iAttrs) {
            if (iElement.attr('type') === 'text') {
              iAttrs.$set('ngTrim', "false");
            }
          }
        };
    });
</script>
<form name="myForm" ng-controller="ExampleController">
  <label>Single word:
    <input type="text" name="input" ng-model="example.text" required>
  </label>
  <div role="alert">
    <span class="error" ng-show="myForm.input.$error.required">
      Required!</span>
    <span class="error" ng-show="myForm.input.$error.pattern">
      Single word only!</span>
  </div>
  <tt>text = {{example.text}} - 3</tt><br/>
  <tt>text = {{example.text.length}} - 3</tt><br/>
  <tt>myForm.input.$valid = {{myForm.input.$valid}}</tt><br/>
  <tt>myForm.input.$error = {{myForm.input.$error}}</tt><br/>
  <tt>myForm.$valid = {{myForm.$valid}}</tt><br/>
  <tt>myForm.$error.required = {{!!myForm.$error.required}}</tt><br/>
 </form>
</body>
</html>

How it works

  1. You can bind multiple directives to the same html element and they can share the same $scope and $attributes.
  2. iAttrs.$set('ngTrim', "false"); is updating the attribute ng-trim. You can't do this using normal dom manipulation because the dom is already compiled (https://docs.angularjs.org/api/ng/service/$compile)
  3. Calling iAttrs.$set will trigger updates on all directives, so it will override the original ng-trim attribute value.
5
  • this is not valid js code, but I get your idea and try to implement it.
    – roman-v1
    May 29, 2015 at 17:07
  • I was able to run this code, but I still don't understand how it is possible, but it is not a question, so your answer is correct.
    – roman-v1
    May 29, 2015 at 17:16
  • I edited my answer, basically as all directives are sharing the same scope, changing any property will reflect in all directives. May 29, 2015 at 17:48
  • Is there any way use it for angular earlier than 1.3.0?
    – roman-v1
    May 31, 2015 at 12:18
  • 1
    I already get answer here: stackoverflow.com/questions/30557490/…
    – roman-v1
    May 31, 2015 at 13:06
2

Another way to extend the input directive (or any directive/service, for that matter) is by using a decorator:

app.config(function($provide) {
  $provide.decorator('inputDirective', function($delegate) {
    var directive = $delegate[0],
        link = directive.link;

    link.post = function(scope, element, attrs) {
      attrs.$set('ngTrim', 'false');
    };

    return $delegate;
  });
});

Working Plunker

I personally prefer this approach because it allows me to execute the directive's original code, if needed. In this particular case that isn't necessary because the input directive has no link function, so you can simply provide your own without worrying about breaking anything.

2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.