current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.