angularjsangularjs-ui-utils

AngularJS ui-utils password validation


I've got a problem with angular ui-utils, specifically ui-validate. I'm trying to supply a user with a password change form and to require "new password" and "confirm new password" to match, here:

<table class="table">
    <form>
    {{!!passwordForm.newPassword2.$error.validator}}
    <tr>
        <th>Current password: </th>
        <td><input type="text" name="currentPassword" ng-model="passwordForm.currentPassword"></td>
    </tr>
    <tr>
        <th>New password: </th>
        <td><input type="password" name="newPassword" ng-model="passwordForm.newPassword"></td>
    </tr>
    <tr>
        <th>Confirm new password:</th>
        <td><input type="password" name="newPassword2" ng-model="passwordForm.newPassword2" ui-validate=" '$value==passwordForm.newPassword' " ui-validate-watch=" 'passwordForm.newPassword' "></td>
    </tr>
    <tr>
        <td/>
        <td>
            <button type="button" ng-click="sendChangePassword()" ng-disabled="passwordForm.newPassword2.$error.validator" class="btn btn-primary">Save</button>
        </td>
    </tr>
    </form>
</table>

and in my controller I have

$scope.passwordForm = {
    currentPassword: "",
    newPassword: "",
    newPassword2: ""
};

The problem is, no matter whether or not newPassword and newPassword2 match, the save button stays enabled and {{!!passwordForm.newPassword2.$error.validator}} evaluates to false.

I've gone through several stackoverflow threads and other sources already, but I just can't figure out what's wrong with my code. Any help would be appreciated.


Solution

  • First make sure you have registered ui-utils properly by adding 'ui.utils' in your app registration like

    angular.module("plunker", ['ui.utils']);
    

    then there are some problems with the Html you have posted, first your form is nested inside of a table and this is not valid, so I moved it outside the table and I also provided the form a name

     <form name="myForm">
        <table class="table">
          {{!!myForm.newPassword2.$error.validator}}
          <tr>
            <th>Current password:</th>
            <td>
              <input type="text" name="currentPassword" ng-model="passwordForm.currentPassword">
            </td>
          </tr>
          <tr>
            <th>New password:</th>
            <td>
              <input type="password" name="newPassword" ng-required="true" ng-model="passwordForm.newPassword">
            </td>
          </tr>
          <tr>
            <th>Confirm new password:</th>
            <td>
              <input type="password" name="newPassword2" ng-required="true" ng-model="passwordForm.newPassword2" ui-validate=" '$value==passwordForm.newPassword' " ui-validate-watch=" 'passwordForm.newPassword' ">
            </td>
          </tr>
          <tr>
            <td></td>
            <td>
              <button type="button" ng-click="sendChangePassword()" ng-disabled="myForm.newPassword2.$error.validator" class="btn btn-primary">Save</button>
            </td>
          </tr>
        </table>
      </form>
    

    I also added ng-required to the two new password fields as that would be needed to not allow a blank password and finally in your buttons ng-disabled attribute reference the actual form name instead of your object to find the validator.

    this should fix it, I have a working example here