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

首先确保您已通过添加＆u ;.utils＆＃39;来正确注册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属性中引用实际的表单名称而不是您的对象来查找验证器。< / p>

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

AngularJS ui-utils密码验证

1 个答案: