Converting from JavaScript to Angular JS

Question

I have a written a pretty sturdy script in JavaScript for password validation but want to move from regular JS to angular. is this easily done? will my code need much modifying in terms of all the if statements and so on?

here is a snippet:

function passwordValidation(){
    var uname = document.getElementById("pword1").value;
    var pword = document.getElementById("cPassword").value;
    var matchCol = "#009900";
    var noMatchCol = "#CC0000";
    var noBg = "#FFFFFF";
    var re = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\.,\[\]_£|\`¬':\;\~{}<>()#?!\@$\%^&*-]).{8,20}$/;

    if (uname.length < 1){
        cPassword.style.backgroundColor = noBg;
        match = "";
    }else{

    if (uname == pword){
        match = "Match!";
        cPassword.style.backgroundColor = matchCol;
        cPassword.style.borderColor = matchCol;
    }else if(pword.length < 1){
        cPassword.style.backgroundColor = noBg;
        match = "";
    }
    else {
    match = "No Match!";
        cPassword.style.backgroundColor = noMatchCol;
        cPassword.style.borderColor = noMatchCol;
    }
    document.getElementById("combination").innerHTML = match;

}
}

i've tried simply converting but obviously I need to bind everything.

you may need to use ng-class/ng-style conditionally to apply those styles and you can use ng-pattern for regular expression. (You can give it a try) — Vinod Louis, Dec 02 '14 at 11:31
Is it's easily done. But why do you want to use Angular? Just for one field validation? Its application is much wider, maybe you don't really need it? — dfsq, Dec 02 '14 at 11:32
possible duplicate of ["Thinking in AngularJS" if I have a jQuery background?](http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background) — hon2a, Dec 02 '14 at 11:33
@dfsq want to use angular purely for the practice as I may well be working on it soon with my company — BlueShark, Dec 05 '14 at 13:42

score 1 · Accepted Answer · answered Dec 02 '14 at 17:00

Here is a way to take your code and "convert" it to the "Angular way"

First, some HTML, notice that you do not need ids on the HTML

Username: <input ng-model="someInput.password1" type='password'>
Password: <input ng-model="someInput.password2" type='password'>
<div class="messageBlock"> </div>

CSS:

.messageBlock { border: 1px solid black } // default state
.messageBlock.error { border: 1px solid red } // red border on error
.messageBlock.success { border: 1px solid green } // green border on success

JS:

// you will need to initialize a $scope variable, notice the naming between this and what's used above in ng-model (you don't put $scope in ng-model)
$scope.someInput= {};
$scope.someInput.password1= "";
$scope.someInput.password2= "";

function passwordValidation(){

    var uname = $scope.someInput.password1; // use scope variables to grab passwords
    var pword = $scope.someInput.password2;

    // Instead of what you have below, we can use validation inside the HTML markup, but I will leave some here to demonstrate both uses

}

Error checks in HTML:

  <div>Password: <input ng-model="someInput.password1" type='password' ng-change="passwordValidation()"></div>
  <div>Password repeat: <input ng-model="someInput.password2" type='password'  ng-change="passwordValidation()"></div>
  <div class="messageBlock" 
       ng-class="{'error': someInput.password1.length < 1 || someInput.password1 !== someInput.password2 || errorMessage }"> <!-- if passwords dont match, or password not long enough, apply error class -->
      <div ng-show="!!errorMessage"> {{errorMessage}} </div> <!-- show some other error message from JS, use ng-show to hide div (changes css display to none) -->
      <div ng-bind="successMessage"> </div>  <!-- similar to {{ }}, but using ng-bind is better than {{ }} templates, due to handling page errors better-->
      <div ng-if="someInput.password1.length < 1"> Password not long enough. </div> <!-- ng-if adds/removes from the DOM based on truthy value in condition --> 
      <div ng-if="someInput.password1 !== someInput.password2"> Password 2 doesn't match first one. </div>
  </div>

Notice, I left errorMessage and successMessage, but they're not yet defined anywhere, we will now define them in passwordValidation. Also, there is an ng-change function which is about the same as onchange in regular HTML

// changing to a scope function, so it works with ng-change
$scope.passwordValidation = function(){

    var uname = $scope.someInput.password1; // use scope variables to grab passwords
    var pword = $scope.someInput.password2;

    var re = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[\\\+\=\.,\[\]_£|\`¬':\;\~{}<>()#?!\@$\%^&*-]).{8,20}$/;

    if(re.test(uname))
        $scope.successMessage = "Success!"
    else 
        $scope.errorMessage = "Password contains incorrect characters!"
}

Finally, here is a working plunker: http://plnkr.co/edit/98AnSbO2fpdsFuo3hVCz?p=preview

Converting from JavaScript to Angular JS

1 Answers1