Menu
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>
915
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>EDIT:
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
