angularjs - ngMessages и валидация не работают должным образом

Question

Я добавляю подтверждение на страницу регистрации пользователя в своем приложении, и я пытаюсь использовать ngMessages и встроенную проверку угла.

Я испытываю странное поведение для совпадения паролей и шаблонов в целом.

Вот код для согласования пароля:

<span>Password (6 to 16 character)</span> 
      <span class="item item-input"> 
        <input type="password" 
          ng-model="userRegistration.password" 
          placeholder="password" 
          name="password" 
          ng-minlength="6" 
          ng-maxlength="16" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.password.$touched && userRegistrationForm.password.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.password.$error" ng-show="userRegistrationForm.password.$touched"> 
      <p ng-message="required">This field is required</p> 
      <p ng-message="minlength">This field is too short</p> 
      <p ng-message="maxlength">This field is too long</p> 
      </div> 
      <span>Confirm Password</span> 
      <span class="item item-input"> 
        <input type="password" 
          placeholder="confirm password" 
          ng-model="userRegistration.passwordConfirmation" 
          name="confpass" 
          ng-minlength="6" 
          ng-maxlength="16" 
          ng-pattern="/^{{userRegistration.password}}$/" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.confpass.$touched && userRegistrationForm.confpass.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.confpass.$error" ng-show="userRegistrationForm.confpass.$touched"> 
      <p ng-message="required">This field is required</p> 
      <p ng-message="pattern">Password not matching!</p> 
      </div> 

Проблема заключается в том, что даже если пароль совпадает, то ошибка остается там displayng, что она не соответствует, и я не могу понять, почему он делает это.

Другой пример картины не ведет себя, как ожидается, может быть найден в коде ниже:

<span>System ID</span> 
      <span class="item item-input"> 
        <input type="text" 
          ng-model="userRegistration.id" 
          placeholder="system id" 
          name="systemID" 
          ng-minlength="6" 
          ng-maxlength="6" 
          pattern="/:/" 
          required 
          ng-class="{'invalid-input': userRegistrationForm.systemID.$touched && userRegistrationForm.systemID.$invalid }"> 
       </span> 
      <!-- Form validation messages --> 
      <div role="alert" class="error-message" ng-messages="userRegistrationForm.systemID.$error" ng-show="userRegistrationForm.systemID.$touched"> 
      <p ng-message="required">This field is required</p> 
      <p ng-message="pattern">Colons not required!</p> 
      <p ng-message="minlength">This field is too short</p> 
      <p ng-message="maxlength">This field is too long</p> 
      </div> 

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

Что мне не хватает? Я явно использую ng-pattern и ng-messages неправильно, но не могу понять почему.

Любая помощь была бы действительно оценена.

Codepen с обоими примерами здесь: http://codepen.io/NickHG/pen/NNZYwK?editors=1010

Благодаря

Answer 1

я использовал немного другой подход, чтобы получить эту работу с нг-сообщений. Я сделал пользовательскую директиву так:

.directive('compareTo', function() { 
    return { 
    require: "ngModel", 
    scope: { 
     otherModelValue: "=compareTo" 
    }, 
    link: function(scope, element, attributes, ngModel) { 

     ngModel.$validators.compareTo = function(modelValue) { 
     return modelValue == scope.otherModelValue; 
     }; 

     scope.$watch("otherModelValue", function() { 
     ngModel.$validate(); 
     }); 
    } 
    }; 

}); 

И отобразить сообщение об ошибке с ним, как это:

<div role="alert" class="error-message" 
ng-messages="userRegistrationForm.conf.$error" 
ng-show="userRegistrationForm.conf.$touched"> 
    <p ng-message="required">This field is required</p> 
    <p ng-message="compareTo">Password not matching!</p> 
</div> 

Для получения дополнительной информации и демо пожалуйста, см ссылку ниже.

Codepen демо: http://codepen.io/thepio/pen/rLNBWr?editors=1010

EDIT на основе комментариев:

Ниже приведен пример с использованием нг-шаблон (без директивы требуется): http://codepen.io/thepio/pen/zBYOPy?editors=1010

Я установил ng-change функцию к вашему первый вход и установите регулярное выражение в контроллере, когда оно будет изменено. Затем я привязываю его к ng-pattern ввода подтверждения и соответственно показываю ng-messages.