Подтверждение пароля с помощью AngularJS noMatch работает, но форма $ недействительна?

Question

Я использую этот код, чтобы сделать ввод пароля и подтвердить ввод пароля, чтобы правильно соответствовать

Javascript:

var app = angular.module('app', []); 
app.directive('validPasswordC', function() { 
    return { 
    require: 'ngModel', 
    scope: { 

     reference: '=validPasswordC' 

    }, 
    link: function(scope, elm, attrs, ctrl) { 
     ctrl.$parsers.unshift(function(viewValue, $scope) { 

     var noMatch = viewValue != scope.reference 
     ctrl.$setValidity('noMatch', !noMatch) 
     }); 

     scope.$watch("reference", function(value) {; 
     ctrl.$setValidity('noMatch', value === ctrl.$viewValue); 

     }); 
    } 
    } 
}); 
app.controller('homeCtrl', function($scope) { 
    $scope.submit= function (form) { 
     if(form.$valid) 
     alert('in'); 
     else 
      alert('out'); 
    } 
    }); 

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
<div ng-app="app"> 
    <div ng-controller="homeCtrl"> 
    <p>Password:{{formData.password}}</p> 
    <form name="signupForm" ng-submit="submit(signupForm)"> 
     <div class="fieldset" ng-class="{'has-error':formData.password.$invalid && !formData.password.$pristine}"> 
     <label>Password</label> 
     <input type="password" id="password" name="password" ng-model="formData.password" ng-minlength="8" ng-maxlength="20" ng-pattern="/(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z])/" placeholder="password" required /> 

     <p ng-show="signupForm.password.$error.required" class="error">*</p> 
     <p ng-show="signupForm.password.$error.minlength" class="error"> 
      Passwords must be between 8 and 20 characters.</p> 
     <p ng-show="signupForm.password.$error.pattern" class="error"> 
      Must contain one lower &amp; uppercase letter, and one non-alpha character (a number or a symbol.)</p> 
     </div> 

     <div class="fieldset" ng-class="{'has-error':formData.password_c.$invalid && !formData.password_c.$pristine}"> 
     <label for="password_c">Confirm Password</label> 
     <input type="password" id="password_c" name="password_c" ng-model="formData.password_c" placeholder="confirm password" valid-password-c="formData.password" required /> 

     <p ng-show="signupForm.password_c.$error.noMatch" class="error">Passwords do not match.</span> 
      <p ng-show="signupForm.password_c.$error.required" class="error">*</p> 
     </div> 
    </form> 
    </div> 
</div> 

код работает нормально, но когда я прохожу формы Функция ng-submit всегда говорит о недопустимости пароля в поле подтверждения пароля. Я проверяю эту форму в консоли только для подтверждения поля пароля имеет значение $ valid = false и $ invalid = true. Нужна помощь, что здесь не так.

Вот консоль

Answer 1

Я не понимаю, почему вы используете $parsers вместо $validators? Parsers используются для форматирования не для проверки поля ввода! Вот мое решение:

/** 
* Validator for matching two inputs. 
* The given attribute is the value to match the own modelValue. 
* @example 
* <input name="passwordConfirm" type="password" ng-model="passwordConf" validate-match="newPassword"> 
*/ 
app.directive('validateMatch', function() { 
    return { 
    require: 'ngModel', 
    scope: { 
     validateMatch: '=' 
    }, 
    link: function(scope, element, attrs, ngModel) { 

     scope.$watch('validateMatch', function() { 
     ngModel.$validate(); // validate again when match value changes 
     }); 

     ngModel.$validators.match = function(modelValue) { 
     if (!modelValue || !scope.validateMatch || ngModel.$error.minlength) { 
      return true; 
     } 
     return modelValue === scope.validateMatch; 
     }; 
    } 
    }; 
}); 

$error Атрибут назван match не noMatch потому что это будет двойное отрицание.

Answer 2

Конкретная ошибка, которую вы видите, связана с неправильным использованием $ parsers, вы должны использовать $ validators, как указано в ответе Бетти Ст.

Из угловой документации for $Parsers

Возвращения неопределенного от синтаксического анализатора значит, что произошла ошибка синтаксического анализа.

Обратите внимание, что функция, которую вы не переносите в $ parsers, не имеет возврата, то есть возвращает значение undefined, которое интерпретируется как ошибка синтаксического анализа. (точно так же, как указывает объект $ error)