How to capitalize and uppercase in AngularJS?

Question

How to capitalize and uppercase in AngularJS?

9.4k Views Asked by Mistalis At 28 April 2025 at 12:04

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! :)

Original Q&A

There are 5 best solutions below

ShankarSangoli On 11 June 2015 at 14:58

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="[email protected]" 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>

Gonzalo Ruiz de Villa On 11 June 2015 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

keikoku92 On 11 June 2015 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);

Ankit Pundhir On 28 April 2017 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

**Mistalis** · Accepted Answer

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);
}

How to capitalize and uppercase in AngularJS?

There are 5 best solutions below

Related Questions in HTML

Related Questions in CSS

Related Questions in ANGULARJS

Related Questions in CAPITALIZE

Trending Questions

Popular # Hahtags

Popular Questions