0

私はそのようなフォームの部分を持っています:

<div ng-messages="submittedFrgPwd && forgotForm.username.$error" multiple>
  <div ng-message="pattern">{{ 'INVALID_EMAIL' | translate }}</div>
  <div ng-message="required">{{ 'EMPTY_EMAIL' | translate }}</div>
  <div ng-message="minlength">{{ 'SHORT_EMAIL' | translate }}</div>
  <div ng-message="maxlength">{{ 'LONG_EMAIL' | translate }}</div>
</div>
<input type="email" id="username-remember" name="username" ng-model="username" ng-minlength="8" ng-maxlength="200" required ng-pattern="email_regexp" ng-class="{ 'has-error': submittedFrgPwd && forgotForm.username.$invalid || submittedError}"/>

たとえば、次のようになります。

通常の長さの電子メールを入力すると、無効なパターンが表示されます:

{{ 'INVALID_EMAIL' | translate }}

これは正常です。

しかし！

次のようなものを入力するとa@a.a、両方のエラーが発生します。

<div ng-message="pattern">{{ 'INVALID_EMAIL' | translate }}</div>
<div ng-message="minlength">{{ 'SHORT_EMAIL' | translate }}</div>

しかし、最小の長さが有効になるまでパターンメッセージをスキップするのは本当ですか?

私はそれを試してみます： data-ng-show="submittedFrgPwd && forgotForm.username.$error.pattern && !forgotForm.username.$error.minlength && !forgotForm.username.$error.maxlength"

うまくいくようですが、醜いです）

4

2 に答える 2

0

,分離されたエラーを指定することでこれを行うことができます. 両方のエラーをAND指定しているような操作が発生するはずです.minlength && pattern

マークアップ

<div ng-message="minlength,pattern">{{ 'INVALID_EMAIL' | translate }}</div>

デモプランカー

アップデート

動作していないようng-message="minlength,pattern"です。使用して代替ソリューションを使用することをお勧めしますng-if="!forgotForm.username.$error.minlength"

<form name="forgotForm" ng-controller="mainCtrl">
    <label>
      Enter your name:
      <div ng-messages="submittedFrgPwd && forgotForm.username.$error" multiple>
        <div ng-message="required">{{ 'EMPTY_EMAIL' }}</div>
        <div ng-message="minlength">{{ 'SHORT_EMAIL' }}</div>
        <div ng-message="maxlength">{{ 'LONG_EMAIL'}}</div>
        <div ng-if="!forgotForm.username.$error.minlength" ng-message="pattern">{{ 'INVALID_EMAIL' }}</div>
      </div>
      <input type="text" id="username-remember" name="username" 
        ng-model="username" ng-minlength="8" ng-maxlength="200" 
        required ng-pattern="email_regexp" 
        ng-class="{ 'has-error': submittedFrgPwd && forgotForm.username.$invalid || submittedError}"/>
</form>

Plunkr を更新する

于 2015-07-27T14:09:20.187 に答える
-1

ハンドラーが表示されている場合は、おそらくどこかでエラーが発生したことを意味します。私の最善の最善は、ngMessages が注入されなかったことです。

angular.module('app',['ngTranslate', 'ngMessages'])

さらに、angularjs フォームのデフォルトを使用して送信を確認することもできます。つまり、forgedForm.$submitted です。

<div class="form-group" ng-class="{ 'has-error': forgotForm.$submitted && forgotForm.username.$invalid }">

また、テストしたい特定のシナリオ (電子メール ドメインなど) がない限り、type=email に pattern を使用する必要はありません。ng-message='email' は、電子メールが有効かどうかを処理できる必要があります。

<div ng-message="email">{{ 'INVALID_EMAIL' | translate }}</div>

いずれにせよ、 http: //run.plnkr.co/Em2eBprmn74FqSYu/の下にプランカーのリンクを添付しました

検証時に役立つことがわかったブートストラップcssを含めました（そしてhtmlコードを少し変更します）。

お役に立てれば。

于 2015-07-27T15:02:36.987 に答える