Как сделать обратную проверку пароля в AngularJs

Question

Я пытаюсь выполнить проверку пароля в AngularJs.

HTML

<input type="password" id="inputPassword1" name="Password" class="form-control" data-ng-model="passwordd" ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/" placeholder="Password" required /> 
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span> 

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2" placeholder="Confirm Password" required /> 
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span> 

JS

$scope.doPwdMatch=function(){ 

      if(($scope.password2!=="" || $scope.password2==undefined) && $scope.passwordd !== $scope.password2){ 
        $scope.pwdDonotMatch = true; 
      }else 
        $scope.pwdDonotMatch = false; 
      } 

Он показывает ошибку, если пароль подтверждения не совпадает с паролем. Но он не проверяет, очищаю ли поле пароля и вводит другое значение. Чтобы быть конкретным, обратная проверка не происходит.

Answer 1

Вы можете просто добавить ng-change="doPwdMatch()" свой пароль тег, чтобы сделать это,

<input type="password" id="inputPassword1" name="Password" class="form-control" data-ng-model="passwordd" ng-change="doPwdMatch()" ng-pattern="/^[A-Za-z0-9_+@&$#!^%*-]{6,10}$/" placeholder="Password" required /> 
<span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span> 

<input type="password" id="inputPassword" class="form-control" ng-change="doPwdMatch()" name="password" data-ng-model="password2" placeholder="Confirm Password" required /> 
<span ng-show="pwdDonotMatch"> <span style="color:red">Passwords don't match.</span> </span> 

Редактировать

Вы можете добавить эту логику внутри функции pwdDonotMatch(). То есть вы можете проверить, имеет ли модель для password2 какое-либо значение или нет.

$scope.doPwdMatch = function() { 
    if ($scope.password2 == "" || $scope.passwordd == "") { 
     // If any one field is null, then do not display error message 
     $scope.pwdDonotMatch = true; 
    } 
    else if (($scope.password2 !== "" || $scope.password2 == undefined) && $scope.passwordd !== $scope.password2) { 
     $scope.pwdDonotMatch = true; 
    } else 
     $scope.pwdDonotMatch = false; 
} 

Answer 2

Зачем нужно звонить ng-change?

С ng-model, ваша сфера всегда текущее значение входного сигнала, так что вы можете просто сделать это через ng-if="password1 !== password2"

Так, например:

<div ng-app ng-controller="PasswordCtrl"> 

    <input type="password" id="inputPassword1" name="Password" class="form-control" ng-model="password" placeholder="Password" required /> 

    <span ng-show="myForm.Password.$error.pattern"><span style="color:red">Must contain minimum 6 characters</span></span> 

    <input type="password" id="inputPassword" class="form-control"name="password" ng-model="reenter_password" placeholder="Confirm Password" required /> 

    <span ng-if="password !== reenter_password"> 
     <span style="color:red">Passwords don't match.</span> 
    </span> 
</div> 

И ваш контроллер просто:

function PasswordCtrl($scope) { 
    $scope.password = ""; 
    $scope.reenter_password = ""; 
} 

См. Это jsfiddle example Я создал из вашего кода.