Подтверждение пароля angularjs validation

Question

Попытка сопоставления паролей с использованием пользовательской директивы в угловых js. Я не могу заставить его работать, хотя я просмотрел несколько руководств по Google. Я создал Plunker, который показывает, что он не работает на plunker.

HTML:

<div class="form-group" ng-class="{ 'has-error': form.password.$invalid && !form.username.$pristine }"> 
     <label for="password">Password</label> 
     <input type="password" name="password" id="password" class="form-control" ng-model="user.password" required ng-minlength="6" ng-maxlength="12"/> 
    </div> 
    <div class="form-group" ng-class="{ 'has-error': form.confirm-password.$invalid && !form.confirm-password.$pristine }"> 
     <label for="confirm-password">Confirm Password</label> 
     <input type="password" name="confirm-password" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/> 
     <span ng-show="user.confirmpwd.$error.equal" class="help-block">Password does not match above</span> 
    </div> 

JAVASCRIPT:

app.directive('equal', [ 
function() { 

var link = function($scope, $element, $attrs, ctrl) { 

    var validate = function(viewValue) { 
    var comparisonModel = $attrs.equal; 
     console.log(viewValue + ':' + comparisonModel); 

    if(!viewValue || !comparisonModel){ 
     // It's valid because we have nothing to compare against 
     ctrl.$setValidity('equal', true); 
    } 

    // It's valid if model is lower than the model we're comparing against 
    ctrl.$setValidity('equal', viewValue === comparisonModel); 
    return viewValue; 
    }; 

    ctrl.$parsers.unshift(validate); 
    ctrl.$formatters.push(validate); 

    $attrs.$observe('equal', function(comparisonModel){ 
     return validate(ctrl.$viewValue); 
    }); 

}; 

return { 
    require: 'ngModel', 
    link: link 
}; 
}]); 

Проблема, кажется, вокруг пользовательской директивы, он не кажется, являются обязательными к элементу ngModel правильно? Я чувствую, что мне нужно пропустить что-то простое, я только начинаю изучать AngularJS.

Answer 1

Обязательная привязка поля пароля должна работать, но вы подтверждаете, что поле пароля должно быть не менее 6 символов, что означает, что он будет привязан к модели только после ввода 6 или более символов. До тех пор это будет undefined, и это то, что вы получаете в заявлении console.log, которое я предполагаю.

Однако есть и другие проблемы. Сообщение об ошибке не будет отображаться, потому что ваше имя поля - confirm-password. Вы должны называть его confirmPassword или что-то без тире. Имя используется Угловым как свойство объекта, а ключ объекта JavaScript не может содержать тире.

Так пароль подтверждение части вашей формы должен выглядеть следующим образом:

<div class="form-group" ng-class="{ 'has-error': form.confirmPassword.$invalid && !form.confirmPassword.$pristine }"> 
    <label for="confirm-password">Confirm Password</label> 
    <input type="password" name="confirmPassword" id="confirm-password" class="form-control" ng-model="user.confirmpwd" required equal="{{user.password}}"/> 
    <span ng-show="form.confirmPassword.$error.equal" class="help-block">Password does not match above</span> 
</div>