5

私はAngularJSを初めて使用しますが、広範囲に検索しましたが、この質問に対する有効な答えが見つかりませんでした。おそらく、私が考えている方法では不可能です。

私が望むのは、エラー条件を組み合わせて、より一般的なエラー メッセージをng-messagesモジュールで使用できるようにすることです。私たちのアプリケーションは多言語であるため、これにより、テキストを維持する時間を大幅に節約できます。私の例では、minlength、maxlength、および pattern を組み合わせて、1 つの汎用メッセージを参照させるとよいでしょう。私がそれを機能させる唯一の方法は、タイプごとに個別のng-messageを作成し、冗長と思われるエラーテキストを再利用することです。うまくいけば、いつ/どのように使用するか、または || を理解していないなど、私が見逃している短いものです。

<form id="myFormId" name="myForm" novalidate>
  <input name="sText" ng-model="someText" 
  type="text"
  required
  ng-minlength="8" minlength="8"
  ng-maxlength="8" maxlength="8" 
  ng-pattern="/^[a-zA-Z0-9]{8,8}$/" pattern="/^[a-zA-Z0-9]{8,8}$/">

<div ng-messages="myForm.sText.$error" role="alert">
  Error message:
    <div ng-message="required">Required text missing</div>
    <div ng-message="minlength || maxlength || pattern">Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of || </div>
    <div ng-message="minlength">Too short - this does work but does not change even if this is removed</div>
</div>
</form>

私がやろうとしていることを説明するために、この単純な Plunkを作成しました。

編集1

単一の正規表現パターン表現を使用できることは認識していますが、上記の検証は厳密に問題を再現し、例を示すためのものです。単一のパターンでは表現できなかった、組み合わせたい他の検証があります。

4

3 に答える 3

5

ng-messagesディレクティブ要素内にエラー メッセージが表示されますが、 div内にng-messages単一のエラーしか表示できないという制限があります。ng-messageng-messages

ng-messageしたがって、内部ディレクティブを複数表示したい場合は、ディレクティブ要素に属性ng-messagesを追加する必要があります。ng-messages-multipleng-messages

ドキュメント リンク

マークアップ

<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
    Error message:
    <div ng-message="required">
        Required text missing
    </div>
    <div ng-message="minlength, maxlength, pattern">
        Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
    </div>
    <div ng-message="minlength">
        Too short - this does work but does not change even if this is removed
    </div>
</div>

働くプランカー

アップデート

angularドキュメントの更新後、内に複数のエラーng-messagesを表示することをサポートしていないことがわかりました。この問題を解決するには、要素に属性が必要です。ng-messageng-messagesng-messages-multipleng-messages

ドキュメントから

デフォルトでngMessagesは、一度に 1 つのエラーのみが表示されます。ただし、すべてのメッセージを表示したい場合はng-messages-multiple、ディレクティブを含む要素で属性フラグを使用して、ngMessagesこれを実現できます。

マークアップ

<div ng-messages="myForm.sText.$error" role="alert" ng-messages-multiple>
    Error message:
    <div ng-message="required">
        Required text missing
    </div>
    <div ng-message="minlength, maxlength, pattern">
        Not right length or bad pattern - Why does this not work? I have also tried using comma , instead of ||(OR)
    </div>
    <div ng-message="minlength">
        Too short - this does work but does not change even if this is removed
    </div>
</div>

働くプランカー

于 2015-04-16T11:29:04.067 に答える
3

Angular 1.4 では、ng-message に複数のエラーを指定できます。

<div ng-message="minlength, maxlength">
  Your email must be between 5 and 100 characters long
</div>

ドキュメントを見る

于 2015-12-28T20:49:46.247 に答える
1

ng-message をより一般的なものにするために、すべてのエラー メッセージを 1 か所に保管し、必要なときに使用できます。ng-message-include を使用してこれを行うことができます。

見てください：エラーメッセージの再利用と上書き

http://www.yearofmoo.com/2014/05/how-to-use-ngmessages-in-angularjs.html#reusing-and-overriding-error-messages .

私はあなたがこれを実装したいと思うと思います。

于 2015-04-16T10:47:41.683 に答える