Alphanumeric value in ngModel outputs to uppercase in AngularJS

Question

I have a form with input fields. One input field allows alphanumeric values. But if the value contains letters, then the letters have to be uppercase. How can I implement this approach? Is it possible to define this in the input field, when the user does an input then the letters are automatically shown in uppercase?

The View:

<div class="form-group-sm has-feedback">
  <label class="control-label" for="article-id">Article Nr.</label>
  <input type="text" 
         class="form-control" 
         name="Article" 
         id="article-id"
         ng-model="selected.article" 
         ng-pattern="/^[a-zA-Z]{2}[a-zA-Z\d]{9}[0-9]$/"
         ng-required="true"
         />
</div>
...
//the other inputs are the same definition

It is important for me to save the value in the DB with uppercase letters.

Have you think about changing your pattern to only accept capital letter? — Yumarx Polanco, Jul 09 '15 at 12:36
@JumarPolanco No, I need this Pattern because it have to be a mix of letters and numbers. — yuro, Jul 09 '15 at 12:39
If you use this `/^[A-Z]{2}[A-Z\d]{9}[0-9]$/` as your pattern it will do the same than before but only accepting uppercase — Yumarx Polanco, Jul 09 '15 at 12:48
@JumarPolanco I know, but the user have to have the ability to write also in lowercase and the ngModel will transform the input letters automatically in uppercase. — yuro, Jul 09 '15 at 12:49

score 2 · Accepted Answer · edited May 23 '17 at 10:29

2

Just create a simple directive ,this answer is based on the answer here: Angular.js: How to autocapitalize an input field?.

myApp.directive('capitalize', function() {
   return {
     require: 'ngModel',
     link: function(scope, element, attrs, modelCtrl) {
        var capitalize = function(inputValue) {
           if(inputValue == undefined) 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
     }
   };
});

HTML like -

<input type="text" ng-model="name" capitalize>

edited May 23 '17 at 10:29

Community

1
1

answered Jul 09 '15 at 12:30

ngLover

4,439
3
20
42

I will try your example. – yuro Jul 09 '15 at 12:50
ya sure if works fine then accept ans to help others – ngLover Jul 09 '15 at 12:51
it works fine. But I've solved this also with CSS code. – yuro Jul 09 '15 at 13:20
Note that in angular 1.5, this will change the data, but you will still see the lowercase letters in the input. So you need to add the CSS solution (or you could provide a $render function that sets the input's value, but that's very un-angular). – Amy Blankenship Jun 10 '16 at 15:27

score 0 · Answer 2 · answered Jul 09 '15 at 13:22

0

The first Answer works fine. But I've solved this with this CSS code:

CSS:
#article-id {
    text-transform: uppercase;
}

answered Jul 09 '15 at 13:22

yuro

2,189
6
40
76

Alphanumeric value in ngModel outputs to uppercase in AngularJS

2 Answers2