AngularJS ui-utils password validation

Question

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.

Answer 1

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