anglejs-ngMessagesと検証が期待どおりに機能しない

debugcn 投稿 Dev

ニック

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

パスワードの照合と一般的なパターンで奇妙な動作が発生しています。

パスワードマッチングのコードは次のとおりです。

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

問題は、パスワードが一致しても、一致していないことを示すエラーが表示されたままになり、なぜこれが行われているのか理解できないことです。

期待どおりに動作しないパターンの別の例は、以下のコードにあります。

<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

ありがとう

thepio

これをng-messagesで機能させるために、少し異なるアプローチを使用しました。次のようなカスタムディレクティブを作成しました。

.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

コメントに基づいて編集：

ng-patternを使用した例を次に示します（ディレクティブは不要）：http：//codepen.io/thepio/pen/zBYOPy？editors = 1010

ng-change最初の入力に関数を設定し、変更されたときにコントローラーに正規表現を設定します。次に、それをng-pattern確認入力のにバインドし、ng-messagesそれに応じて表示します。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]