0

以下是我的代码，它适用于密码，但不知何故重新输入密码验证不起作用。让我知道我在这里做错了什么。

  <div class="form-group has-feedback">
    <input type="password" class="form-control" placeholder="Password" ng-model="vm.user.password" name="password" required="" ng-minlength="6" ng-maxlength="20" />
    <div class="help-block" ng-messages="userForm.password.$error" ng-if="userForm.password.$touched">
      <p ng-message="minlength, maxlength, required">Please enter a password containing 6 to 20 characters.</p>
    </div>        
  </div>
  <div class="form-group has-feedback">
    <input type="password" class="form-control" placeholder="Retype password" name="retypePassword" required="" ng-model="vm.user.retypePassword">
    <div class="help-block" ng-messages="userForm.retypePassword.$error" ng-if="userForm.retypePassword.$touched">
      <p ng-message when="vm.user.retypePassword !== vm.user.password" >Please retype your correct password.</p>
    </div>

在DOCS中，他们提到我们可以使用表达式，但不知何故它没有验证。

4

3 回答 3

0

如文档here 中所述，如果需要使用表达式，则需要在 when 属性中提供错误名称，您需要将表达式放在消息块中，因此像这样更改 div 块

<div class="help-block" ng-messages="multipleValueExpression">
      <p ng-message when="value1" >Please retype your correct password.</p>
</div>

或者您可以通过像这样使用when-exp更改when来实现相同的目的

<p ng-message when-exp="vm.user.retypePassword !== vm.user.password" >Please retype your correct password.</p>

祝你好运

于 2016-02-02T05:08:14.697 回答
0

我相信你的用法有误。该when属性用于多消息情况，它使用字符串键或键数组检查定义的错误是否存在，基本上就像 ng-message 属性一样。

您可以使用指令创建自定义验证器，如此处所述。

您还可以使用 ng-change 函数简单地操作 $error 对象，如下所示：

<input type="password" ng-model="vm.user.retypePassword"
    ng-change="setMatchError(userForm.retypePassword,userForm.password)">

然后在你的控制器中

vm.setMatchError = function(input1, input2) {
    if (input1.$viewValue!=input2.$viewValue) {
         input1.$error.match = true;
    } else {
         delete input1.$error['match'];
    }
 }

最后，您将能够使用 ng-message 指令来引用它

<p ng-message="match">Your passwords must match!</p>

或者

<p ng-message when="match">Your passwords must match!</p>

虽然最后一种方法可能会不赞成直接在应用程序代码中操作角度对象。

但是，需要注意的一点是，如果输入未通过其 html5 验证，则模型不会得到更新，因此您将无法引用模型值。

最后一个选项：您可以完全忽略确认密码上的 ng-message(s) 指令（因为它并没有真正给您太多信息），而只使用 ng-if 和 ng-change 并直接进行模型验证。

于 2016-01-31T07:20:04.637 回答
0

In this case you can use a directive use-form-error that helps to create your own checks, like the ng-required, ng-minlength or ng-pattern.

<form name="ExampleForm">
  <label>Password</label>
  <input ng-model="password" required />
  <br>
  <label>Confirm password</label>
  <input ng-model="confirmPassword" required use-form-error="dontMatch" use-error-expression="password && confirmPassword && password!=confirmPassword" />
  <div ng-messages="ExampleForm.$error" class="errors">
    <div ng-message="dontMatch">
      Passwords Do Not Match!
    </div>
  </div>
</form>

Live example jsfiddle.

于 2016-02-02T04:36:52.060 回答