4

I have an input password field. I want to be able to warn the user that they cannot have any white space in there password. The trouble I'm finding is that I cant pass the trailing white space to the scope in order to detect it and warn the user that they cannot do this.

See my plunkr example: LINK

If you type in the input field the scope will return how many characters the password is and if you add white space at the end of the password the scope will not report the correct string length because it is obviously trimming any trailing white space which means I have no way to identify if the user is entering any spaces or not. So as the user adds trailing spaces the input password field will show that an extra character has been added when the scope is only reporting the length of characters without any trailing spaces.

Malcr001
  • 8,179
  • 9
  • 44
  • 57
  • 1
    What's wrong with whitespace in the password? Restrictions like that just reduce the security of the password, and you should be bcrypt hashing for storage anyways. – ceejayoz Jul 12 '13 at 18:23
  • possible duplicate of [angularjs filters on ng-model in an input](http://stackoverflow.com/questions/14419651/angularjs-filters-on-ng-model-in-an-input) – shaunhusain Jul 12 '13 at 18:35
  • Looks like you need to upgrade your angular version to take advantage of this directive (1.1.1 vs 1.0.7 in your plunkr) or you know patch your copy with the commit in the SO post linked... – shaunhusain Jul 12 '13 at 18:36
  • Please post the relevant code **in the question itself**, don't just link. Why: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question – T.J. Crowder Jul 12 '13 at 18:39

1 Answers1

8

Here's the fixed plunkr solution is upgrade to 1.1.1 of angular to take advantage of ng-trim directive which allows you to turn off the trimming: http://plnkr.co/edit/FLCQY2zuRV1ZMy6WCbs8?p=preview

Upgrade to Angular 1.1.1 or higher (tested, might work in some lower versions) add this directive to your element where you have the ng-model you don't want trimmed.

ng-trim="false"

Here's the full details:

<!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 data-require="angular.js@1.1.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.1/angular.min.js" data-semver="1.1.1"></script>
    <script src="angular_ui.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form>
      Pass length is {{pass.length}}<br>
      <input type="password" data-ng-model="pass" data-ng-trim="false">
    </form>
  </body>

</html>

And the JS

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

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
});
shaunhusain
  • 19,630
  • 4
  • 38
  • 51
  • Always post the relevant code *in the answer itself*, don't just link. Why: http://meta.stackexchange.com/questions/118392/add-stack-overfow-faq-entry-or-similar-for-putting-code-in-the-question – T.J. Crowder Jul 12 '13 at 18:44
  • @T.J.Crowder I was expecting the question to be closed I added an answer to show it could be done without jQuery to not lead to confusion. It is as far as I can tell a duplicate just phrased slightly differently, but searching for how to not trim white space angularjs Google gave me the right SO post. Furthermore (s)he included a link to the plunkr in the first place with no code, don't see how I'm in the wrong here... oh I see you commented to the OP as well, my bad. – shaunhusain Jul 12 '13 at 18:46