Угловой JS ui-utils проверка пароля

Question

У меня проблема с угловыми ui-utils, в частности ui-validate. Я пытаюсь поставить пользователь формой смены пароля и требовать «нового пароля» и «подтвердить новый пароль», чтобы соответствовать, здесь:

<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> 

и в моем контроллере у меня есть

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

Проблема в том, неважно, совпадают или нет newPassword и newPassword2, кнопка сохранения остается включенной и {{!!passwordForm.newPassword2.$error.validator}} оценивает значение false.

Я уже прошел несколько потоков stackoverflow и других источников, но я просто не могу понять, что не так с моим кодом. Любая помощь будет оценена по достоинству.

Answer 1

Сначала убедитесь, что вы зарегистрировали UI-Utils правильно, добавив «ui.utils» при регистрации приложения, как

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

то есть некоторые проблемы с Html вы выложили, первую ваша форма вложена внутри таблицы, и это не действует, так что я переехал ее за пределы стола, и я также предоставил форме имя

<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> 

Я также добавил нг-требуется для двух новых полей пароля в которые будут необходимы для не разрешить пустой пароль и, наконец, на ваших кнопках ng-disabled attri bute ссылается на фактическое имя формы вместо вашего объекта, чтобы найти валидатор.

это должно исправить, у меня есть рабочий пример here