Angular js remove leading & trailing spaces from the input textbox

Question

See this Plunkr : http://plnkr.co/edit/YAQooPn0UERDI5UEoQ23?p=preview

Type text as "_______what___ever_____" (without quotes & _ represents spaces.)

Angular is removing spaces (from front & back & not in between) from the model (which is my desired behavior), but my textbox is keeping the spaces.

how can I remove the spaces from the textbox also ? i.e. I want the textbox also to reflect the value in model.

Edit: Better explanation of my needs.

For Eg: If I typed "___What_Ever____" ( without quote & _ is space),

1) my textbox will show me same what i have typed i.e. "___What_Ever____"

2) while my model will show me "What Ever".

I want my textbox's value also to be as "What Ever".

HTML :

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

  <head>
    <link rel="stylesheet" href="style.css" />
    <script data-require="[email protected]" data-semver="1.9.0" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.js"></script>
    <script data-require="[email protected]" data-semver="1.0.7" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal">
    <br>
    model value is "{{modelVal}}"
  </body>

</html>

JS :

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";

  })

I'm not sure it's a good idea to remove leading and trailing spaces as the user is typing. — camden_kid
– camden_kid, Commented Oct 17, 2016 at 9:12
@camden_kid i am fine even if it happens on a blur or some other event. — Abdul Rehman Sayed
– Abdul Rehman Sayed, Commented Oct 17, 2016 at 10:09

camden_kid · Accepted Answer · 2016-10-17 10:51:57Z

5

Would this work? - Plunker

ng-blur doesn't work with your Plunker because the version of AngularJS you are loading (1.0.7) is quite old. I replaced it with the latest version (1.5.6). I also use ng-trim="false" to get the correct text input by the user.

Markup

<body ng-controller="MyCtrl">
    <input type="text" ng-model="modelVal" ng-change="change()" ng-blur="blur()" ng-trim="false">
    <br>
    model value is "{{newModelVal}}"
</body>

JS

angular.module('app', [])
  .controller('MyCtrl', function($scope) {
    $scope.modelVal="";
    $scope.change = function () {
      $scope.newModelVal = $scope.modelVal;
    }
    $scope.blur = function () {
      $scope.modelVal = $scope.newModelVal.trim();
    }
  })

edited Oct 17, 2016 at 10:51

answered Oct 17, 2016 at 10:36

camden_kid

12.8k12 gold badges57 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2016-10-17 08:42:54Z

3

You can do this,

<body ng-controller="MyCtrl">
 <input type="text" ng-change="modelVal = modelVal.split(' ').join('')" ng-model="modelVal">
 <br>
  model value is "{{modelVal}}"
</body>

DEMO

EDIT:

You can use ngTrim which is provided by Angular itself

 <input type="text" ng-trim="true" ng-model="modelVal">
 <br> model value is "{{modelVal}}"

DEMO

edited Oct 17, 2016 at 8:42

answered Oct 17, 2016 at 7:52

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

6 Comments

Abdul Rehman Sayed Over a year ago

This will remove spaces in between words also.

Sajeetharan Over a year ago

this is what you asked in question

Abdul Rehman Sayed Over a year ago

sorry for confusion. i only want to remove leading(from the start) & trailing (from the end) spaces.

Nikos Paraskevopoulos Over a year ago

ng-trim works with recent versions of Angular, the plunker uses the ancient 1.0.7... Change it to 1.5.x and it works.

Abdul Rehman Sayed Over a year ago

@NikosParaskevopoulos yes i changed it, but still the textbox is not updated. the model value does show the spaces. I want to change the value in textbox also along with the model value.

|

Collectives™ on Stack Overflow

Angular js remove leading & trailing spaces from the input textbox

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related