CODEWITHSUNDEEP
htmlcssangularjscapitalize
Mistalis
Mistalis

Reputation: 18309

How to capitalize and uppercase in AngularJS?

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

Upvotes: 3

Views: 10030

Answers (5)

Ankit Pundhir
Ankit Pundhir

Reputation: 1097

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

Upvotes: 0

Mistalis
Mistalis

Reputation: 18309

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

Upvotes: 0

Gonzalo Ruiz de Villa
Gonzalo Ruiz de Villa

Reputation: 341

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

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69915

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>

Upvotes: 1

keikoku92
keikoku92

Reputation: 151

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

Upvotes: 0

Related Questions