Question

我似乎不明白为什么ng-show在密码不匹配时无法显示此验证。我错过了什么？

<form name="myForm">
    <div class="form-group">
      <input ng-required="true" name="username" ng-minlength="3" ng-maxlength="10" ng-model="model.user.username" type="text" class="form-control" id="user-name" placeholder="Username">
      <p class="errorValidationText" ng-show="myForm.username.$invalid && myForm.username.$touched">Please pick a username between 3 - 10 characters.</p>
    </div>

    <div class="form-group">
      <input ng-required="true" name="password" ng-minlength="4" ng-model="model.user.password" type="password" class="form-control" id="password" placeholder="Password">
      <p class="errorValidationText" ng-show="myForm.password.$invalid && myForm.password.$touched">Password should contain atleast 4 characters.</p>
    </div>

    <div class="form-group">
      <input ng-required="true" name="verifyPassword" ng-minlength="4" ng-model="model.user.verifyPassword" type="password" class="form-control" id="verify-password" placeholder="Verify Password">
      <p class="errorValidationText" ng-show="(myForm.verifyPassword.value != '') && (myForm.password.value != myForm.verifypassword.value)">Passwords don't match.</p>
    </div>

 <button ng-disabled="myForm.username.$invalid || myForm.password.$invalid || myForm.verifyPassword" ng-click="model.register(model.user)" class="btn btn-success btn-block">Register</button>

  </form>

谢谢！我已经提到了其他解决方案，现有的问题都没有与我正在做的相似。

Answer 1

myForm.verifyPassword.value套管在您的陈述myForm.verifypassword.value

中有所不同

我做了一个例子，因为我没有你的代码

＆＃13;

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

  $scope.myForm = {
    password: '',
    verifyPassword: ''
  };

  $scope.submit = function() {
    console.log('success');
  };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">

  Password:
  <input type="password" ng-model="myForm.password">
  <br>Verify Password:
  <input type="password" ng-model="myForm.verifyPassword">
  <br>

  <p ng-show="(myForm.verifyPassword != '') && (myForm.password != myForm.verifyPassword)">Passwords don't match</p>

  <button>Submit</button>

</div>

＆＃13;

Answer 2

myForm对象没有输入值，您可以使用{{myForm}}查看。请改用ngModel中的值：

<p ng-show="(user.model.verifyPassword != '') && (user.model.password != user.model.verifyPassword)">Passwords don't match</p>

另请注意，如果您的输入无效，则ngModel将不会设置值：user.model.verifyPassword != ''将始终为true，因为您设置了ng-minlength=4。

另一个提示：ng属性只有在评估范围变量时才有意义，ng-required="true"与required="required"相同。

密码与angularJs不匹配

2 个答案: