Угловая Сравнить Директива по Поручению

Question

У меня есть эта форма с паролем и поле confirmPassword. Я хочу сравнить поле пароля с полем confirmPassword. У меня небольшая проблема, потому что у меня есть ng-show, который должен показывать только ошибку «Пароли не совпадают», когда пароль не совпадает, но в тот момент, когда сообщения всегда отображаются.

<label class="control-label">Password * 
    <div class="row m-b-15"> 
    <div class="col-md-12"> 
     <input type="text" placeholder="Password" name="password" required="" ng-model="user.password" class="form-control"/> 
    </div> 
    </div> 
    <label class="control-label">Re-enter Password *</label> 
    <div class="row m-b-15"> 
    <div class="col-md-12"> 
     <input type="text" placeholder="Re-enter Password" name="confirmPassword" required="" ng-model="user.confirmPassword" ka-compare-to="user.password" class="form-control"/> 
     <div ng-show="signUpForm.confirmPassword.$error" class="form-group has-error"> 
     <label class="control-label">Passwords Do Not Match</label> 
     </div> 
    </div> 
    </div> 
</label> 

.directive('kaCompareTo', function(){ 

    return { 
     restrict: 'A', 
     require: 'ngModel', 
     scope: { 
      otherModelValue: '=kaCompareTo' 
     }, 
     link: function(scope, element, attributes, ngModel){ 

      ngModel.$validators.kaCompareTo = function(modelValue){ 

       return modelValue === scope.otherModelValue; 
      }; 

      scope.$watch("otherModelValue", function() { 

       ngModel.$validate(); 
      }); 

     } 

    } 

}) 

Заранее спасибо.

Answer 1

Чтобы заставить его работать, вы должны изменить нг-шоу состояния от signUpForm.confirmPassword.$error до signUpForm.confirmPassword.$error.kaCompareTo

Для достижения такого же поведения, вы можете использовать AngularJS «нг-шаблон» атрибут вместо создания пользовательской директивы. ИМХО это даже лучшее решение, потому что она возвращает ошибку, если только «confirmPassword» не является пустым:

<input 
type="text" 
placeholder="Re-enter Password" 
name="confirmPassword" 
required="" 
ng-pattern="user.password" 
ng-model="user.confirmPassword" 
class="form-control"/> 
<div 
ng-show="signUpForm.confirmPassword.$error.pattern" 
class="form-group has-error"> 
    <label class="control-label">Passwords Do Not Match</label> 
</div>