ng-message无法使用重新输入密码验证AngularJS

Question

Following is my code, which is working fine for password, but somehow Retype password validation is not working. Let me know what I am doing wrong here.

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

In DOCS they mentioned that we can use expression, but somehow its not validating.

Answer 1

I believe you've got the usage wrong. the when attribute is used in a multi-message situation and it checks to see if the defined error exists, using a string key or array of keys, just like the ng-message attribute, basically.

You can create a custom validator with a directive, such as explained here .

You can also simply manipulate the $error object with an ng-change function something like this:

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

Then in your controller

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

finally, you'll be able to refer to that using the ng-message directive

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

or

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

Though this last method would probably be frowned upon form manipulating the angular objects directly in application code.

One thing to note , however, is that it seems tha if an input has not passed its html5 validation, the model doesn't get updated, so you won't be able to refer to the model values.

---

One last option: you can ignore the ng-message(s) directives entirely on the confirmation password (since it doesn't really give you much) and just use ng-if and ng-change and direct model validation.

Answer 2

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 .

Answer 3

As described in the documentation here you would need to give your error name in the when attribute if you need to use expression you need put your expression in messages block,so change your div block like this

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

or you can achieve the same by changing when with when-exp like this

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

good luck