angularjs - ngMessageと検証が正常に動作しない

Question

私のアプリのユーザー登録ページに検証を追加していますが、ngMessagesと組み込みのanglejs検証を使用しようとしています。

パスワードマッチングや一般的なパターンで奇妙な動作が発生しています。

<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

私は、これはNG-のメッセージで動作するように取得するには少し異なるアプローチを使用していました。

.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：

ここではNGパターンを（何のディレクティブは必要ありません）を使用しての例です：http://codepen.io/thepio/pen/zBYOPy?editors=1010

私はあなたにng-change機能を設定します最初に入力し、コントローラーが変更されたときにregexpを設定します。それから確認入力のng-patternにバインドし、それに応じてng-messagesを表示します。