Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Get trailing white space from input type password to scope?

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.

like image 734
Malcr001 Avatar asked Feb 15 '23 22:02

Malcr001


1 Answers

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="[email protected]" 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';
});
like image 91
shaunhusain Avatar answered Feb 18 '23 17:02

shaunhusain