AngularJS ui-utils 密码验证

Question

我遇到了 angular ui-utils 的问题，特别是 ui-validate。我正在尝试向用户提供密码更改表单并请求 uire "new password" 和 "confirm new password" 进行匹配，此处：

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

我已经查看了几个 Whosebug 线程和其他来源，但我就是无法弄清楚我的代码有什么问题。任何帮助将不胜感激。

Answer 1

首先确保您已正确注册 ui-utils，方法是在您的应用程序注册中添加 'ui.utils'，例如

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

然后你发布的 Html 有一些问题，首先你的表单嵌套在 table 里面，这是无效的，所以我把它移到了 table 外面] 并且我还为表格提供了一个名称

 <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-required ，因为不允许使用空白密码是必需的，最后在您的按钮中 ng-disabled 属性引用实际的表单名称而不是你的对象找到验证器。

这应该可以解决，我有一个工作示例 here

AngularJS ui-utils 密码验证

AngularJS ui-utils password validation

angularjs

angularjs-ui-utils