Как объединить сообщения ng-message

Я новичок в AngularJS, но я много искал и не смог найти рабочий ответ на этот вопрос, возможно, это просто невозможно, как я это имею в виду.

Я хотел бы иметь возможность комбинировать состояния ошибок, чтобы использовать более общие сообщения об ошибках в модуль ng-сообщений. Это экономит нам много времени на поддержку текстов, поскольку наше приложение является многоязычным. В моем примере было бы здорово объединить minlength, maxlength и шаблон и сделать так, чтобы он ссылался на 1 общее сообщение. Единственный способ заставить его работать - это создать отдельное ng-сообщение для каждого типа, а затем повторно использовать текст ошибки, который кажется мне излишним. Надеюсь, это что-то короткое, чего мне не хватает, например, я не понимаю, когда и как использовать , или ||.

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

Я создал этот простой планк, чтобы проиллюстрировать, что я пытаюсь сделать:

ИЗМЕНИТЬ 1

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


javascript error-handling angularjs ng-messages
person Igor    schedule 16.04.2015    source источник

Ответы (3)


arrow_upward
5
arrow_downward

ng-messages покажет сообщение об ошибке внутри элемента директивы ng-messages, но у него есть ограничение, заключающееся в том, что вы можете отображать только одну ошибку ng-message внутри div ng-messages.

Поэтому, если вы хотите показать несколько ng-message внутри директивы ng-messages, вам нужно добавить атрибут ng-messages-multiple в элемент директивы ng-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>

Рабочий планкр

Обновить

После обновления углового документа я узнал, что ng-messages не поддерживает отображение нескольких ошибок ng-message внутри ng-messages, для решения этой проблемы у нас должен быть атрибут ng-messages-multiple для элемента ng-messages.

Из Документов

По умолчанию ngMessages будет отображать только одну ошибку за раз. Однако, если вы хотите отобразить все сообщения, то флаг атрибута 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>

Рабочий Plunkr

person Pankaj Parkar    schedule 16.04.2015
comment
Вот чего я боялся. Я видел на веб-сайте Angular демонстрацию, в которой использовались запятые docs.angularjs.org/api/ngMessages. /directive/ngMessage, поэтому я надеялся, что здесь можно использовать несколько свойств, но, может быть, они означают что-то совсем другое? Причина, по которой я пытался использовать ng-message, заключалась в том, что я всегда мог гарантировать отображение только одного сообщения об ошибке в цепочке вместо нескольких сообщений. - person Igor; 16.04.2015
comment
Это уже не точная информация. См. ответ Джона Кнупа. - person Will; 13.01.2016
comment
@Will no man.. Требование OP заключалось в том, что он хотел показать несколько ng-сообщений внутри директивы ng-messages .. и когда я ответил на вопрос ng-messages-multiple, этого не было в документе .. вы могли бы проверить ответ на обновление и plunkr тоже. - person Pankaj Parkar; 13.01.2016
comment
Похоже, ваш обновленный ответ действительно отвечает на исходный вопрос. - person Will; 14.01.2016

arrow_upward
3
arrow_downward

В Angular 1.4 вы можете указать несколько ошибок для ng-сообщения:

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

См. документацию.

person John Knoop    schedule 28.12.2015
comment
Спасибо, я попробую это на следующей неделе, когда вернусь на работу. - person Igor; 29.12.2015

arrow_upward
1
arrow_downward

Чтобы сделать ваше ng-сообщение более общим, вы можете хранить все свои сообщения об ошибках в одном месте и использовать их при необходимости. Вы можете сделать это, используя ng-message-include.

Взгляните на: Повторное использование и переопределение сообщений об ошибках

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

Я думаю, вам понравится реализовать это.

person Reena    schedule 16.04.2015
comment
Спасибо за ответ. Я просматривал этот сайт раньше, и у него есть хорошее представление о том, как структурировать сообщения, однако в этом случае речь не идет о повторном использовании сообщений в моделях модели или контроллера. Я хочу использовать общие, но специфичные для модели сообщения, которые могут отображаться более чем в одном случае. - person Igor; 16.04.2015