angularjs force uppercase in textbox

Question

I\'ve tried using the uppercase filter but it does not work. I\'ve tried doing it two ways:

<         


        

Answer 1

This will not work at all.

ng-model is for specifying which field / property from the scope should be bound to the model. Also, ng-model does not accept an expression as value. Expressions in angular.js are things between {{ and }}.

The uppercase filter could used in the output and everywhere where expressions are allowed.

You cannot do what you want to do, but you could use CSS's text-transform to at least display everything in uppercase.

If you want to have the value of a text field in uppercase letters you can achieve this with some custom JavaScript.

In your controller:

$scope.$watch('test', function(newValue, oldValue) {
  $scope.$apply(function() {
    $scope.test = newValue.toUpperCase();
  }
});

Answer 2

one of the simple way is,
<input type="text" ng-model="test" ng-change="upper(test)/>

just do below 2 line code in your js file,
$scope.upper = function(test){
$scope.test = test.toUpperCase();
}

here is my fiddle http://jsfiddle.net/mzmmohideen/36qp9ekL/299/

Answer 3

Don't forget to include 'ngSanitize' in your module!

app.directive('capitalize', function() {
    return {
        restrict: 'A', // only activate on element attribute
        require: '?ngModel',
        link : function(scope, element, attrs, modelCtrl) {
            var capitalize = function(inputValue) {
                if(inputValue) {
                    var capitalized = inputValue.toUpperCase();
                    if (capitalized !== inputValue) {
                        modelCtrl.$setViewValue(capitalized);
                        modelCtrl.$render();
                    }
                    return capitalized;
                }
            };
            modelCtrl.$parsers.push(capitalize);
            capitalize(scope[attrs.ngModel]); // capitalize initial value
        }
    };

});

• Pay attention to "?" in "require: '?ngModel',"... only then worked my application.

• "if(inputValue) {...}" For no undefined error occurs

Answer 4

The idea is to show (not transform) the string as uppercase at client side and transform into uppercase at server side (users can always control what happens at client side). So:

1) in the html:

<input id="test" type="text" ng-model="test">

here no uppercase transformation.

2) in the css:

#test {text-transform: uppercase;}

data is shown as uppercase, but actually still lowercase, if user typed in lowercase. 3) turn the string into uppercase at server side when inserting into database.

= = = = = for playing around, can try follow:

<input type="text" ng-model="test" ng-change="test=test.toUpperCase();">
<input type="text" ng-model="test" ng-blur="test=test.toUpperCase();">

but I think ng-change or ng-blur ways are not necessary for your case.

Answer 5

To improve the answer by Karl Zilles this is my revision of his solution. In my version the placeholder isn't changed to uppercase and works also if you want to do a regex on the string. It also take the "type" of the input string (null or undefined or empty):

var REGEX = /^[a-z]+$/i;
myApp.directive('cf', function() {
    return {
        require: 'ngModel',
        link: function(scope, elm, attrs, ctrl) {
            ctrl.$validators.cf = function(modelValue, viewValue) {
            ctrl.$parsers.push(function(input) {
                elm.css("text-transform", (input) ? "uppercase" : "");
                return input ? input.toUpperCase() : input;
            });
            return (!(ctrl.$isEmpty(modelValue)) && (REGEX.test(viewValue)));
        }
    }
}
});

Answer 6

If you want to change model and value, use:

angular.module('MyApp').directive('uppercased', function() {
    return {
        require: 'ngModel',
        link: function(scope, element, attrs, ngModel) {
            element.bind("blur change input", function () {
                ngModel.$setViewValue($(this).val().toUpperCase());
                $(this).val($(this).val().toUpperCase());
            });
            element.css("text-transform","uppercase");
        }
    };
});

Then add uppercased to your html input text

<input  type="text" uppercased />