How to capitalize and uppercase in AngularJS?

Question

I want to capitalize/uppercase some fields in a HTML form.

HTML

<form role="form" ng-submit="submit()">
    <input type="text" class="capitalize" ng-model="first"/>
    <input type="text" class="uppercase" ng-model="last"/>
    <button type="submit"></button>
</form>

CSS

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

When I enter data on the fields it works well, but when form is submitted, capitalization is not preserved.

I use an Angular controller/service to send data to my server. Should I edit data on my controller, or could I keep the CSS capitalization ?

Thanks! :)

css doesn't physically change the form. it just changes how it's DISPLAYED. if you want to change the actual characters in the form fields, you'll need to use javascript. — Marc B, Jun 11 '15 at 14:56
as above - or parse the values in your backend to capitalize / uppercase. I'm not sure what's the benefit from doing this though - you can always present the data with the same CSS selectors you added to your input fields — Luca, Jun 11 '15 at 15:01

ShankarSangoli · Answer 1 · 2015-06-11T15:08:39.550

You cannot do that without actually change the field values using javascript in your controller/service once you submit the form. Css only changes the appearance/UI on the page but not the actual value.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});

/* Put your css in here */

.uppercase {
    text-transform: uppercase;
}

.capitalize {
    text-transform: capitalize;
}

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.0/angular.js" data-semver="1.4.0"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form role="form" ng-submit="submit()">
    <input type="text" class="capitalize" id="firstname" ng-model="first"/>
    <input type="text" class="uppercase" id="lastname" ng-model="last"/>
    <button type="submit"></button><
</form>

<button onclick="$('#firstname').removeClass('capitalize')">Remove Capitalize</button>
<button onclick="$('#lastname').removeClass('uppercase')">Remove Uppercase</button>
  </body>

</html>

score 0 · Answer 2 · answered Jun 11 '15 at 15:07

For the html this is because css only styles it so something like text-transform: uppercase; will only be visual.

To have it registered as uppercase you need to format it with a serverside as php and you could send your form to then get the data with POST AND use something like

 $_POST = array_map("strtoupper", $_POST);

score 0 · Answer 3 · answered Jun 11 '15 at 15:15

You must ensure that the model have always an uppercased string. In your code you are not changing the model value, instead, you are formatting the value of the input to be uppercased.

You could use a directive to modify the value of the input before assigning it to the model. To do this kind of tasks you can register functions in the $parsers property of ngModel. You may use something like this:

angular.module("myModule")
  .directive("toUppercase", toUppercase)

function toUppercase(){
  function parser(value){
    return value ? value.toUpperCase() : value;
  }

  return {
    require: 'ngModel',
    link: function (scope, elm, attr, ngModel){
      ngModel.$parsers.push(parser);
    }
  }
}

Using this directive, you can target your css to the directive attribute:

  [to-uppercase]: text-transform: uppercase;

You can see a working plunkr here: http://plnkr.co/edit/A0gaPkAnPXWq8Od6RI9f?p=preview

Mistalis · Accepted Answer · 2017-04-28T07:12:15.063

Here is a solution. Add to your controller those 2 new functions:

function upperCase(str) {
    return str.charAt(0).toUpperCase() + str.slice(1);
}

function capitalize(str) {
    return str.toUpperCase();    
}

In $scope.submit(), You can transform the firstname/lastname as following:

$scope.submit = function() {
    ...
    $scope.firstname = upperCase($scope.firstname);    
    $scope.lastname = capitalize($scope.lastname);
}

score 0 · Answer 5 · answered Apr 28 '17 at 08:53

You can create a directive text-transforms:

app.directive('textTransforms',['$parse',function($parse){
  return {
    restrict:'A',
    require:'^ngModel',
    scope:{
      value:'=ngModel',
      caseTitle:'@textTransforms'
    },
    link:function postLink(scope, element, attrs){
      scope.$watch('value',function(modelValue,viewValue){
        if(modelValue){
          var newValue;
          switch(scope.caseTitle){
            case 'uppercase':
              newValue = modelValue.toUpperCase();
              break;
            case 'lowercase':
              newValue = modelValue.toLowerCase();
              break;
            case 'capitalize':
              newValue = modelValue.charAt(0).toUpperCase() + modelValue.slice(1);
              break;
            default:
              newValue = modelValue;
          }
          $parse('value').assign(scope,newValue);
        }
      });
    }
  };
}]);

You can use above directive as follows:

<input type="text" text-transforms="capitalize" ng-model="first"/>
<input type="text" text-transforms="uppercase" ng-model="last"/>

I have also created a plunk: https://plnkr.co/edit/AoW8MuoCJWnbRtg25LJE?p=preview

How to capitalize and uppercase in AngularJS?

5 Answers5

Linked