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.

Answer 1

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