0

我遇到了 angular 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}}评估为假。

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

4

1 回答 1

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

这应该解决它，我在这里有一个工作示例

于 2015-03-16T17:35:49.263 回答