如何组合 ng-message 消息

Question

我是 AngularJS 的新手，但我已经进行了广泛的搜索，但找不到这个问题的有效答案，也许我的想法是不可能的。

我想要的是能够组合错误条件，以便我可以在 ng-messages 模块中使用更通用的错误消息。由于我们的应用程序是多语言的，因此这为我们节省了大量维护文本的时间。在我的示例中，将 minlength、maxlength 和 pattern 结合起来并让它引用 1 个通用消息会很棒。我让它工作的唯一方法是为每种类型单独使用 ng-message，然后重复使用对我来说似乎多余的错误文本。希望这是我遗漏的一些简短的东西，比如不理解 when/how 使用 , 或 ||.

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

我创建了 this simple Plunk 来说明我正在尝试做的事情：

编辑 1

我知道我可以使用单个正则表达式模式表达式，但上述验证严格来说是为了重现问题并展示示例。我还有其他验证，我想将它们无法用单一模式表达。

Answer 1

为了使您的 ng-message 更通用，您可以将所有错误消息保存在一个地方并在需要时使用它。您可以使用 ng-message-include 来做到这一点。

看看：重用和覆盖错误消息

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

我想你会喜欢实现这个。

Answer 2

ng-messages 将在 ng-messages 指令元素内显示错误消息，但有限制，您只能在 ng-messages [=62= 内显示单个错误 ng-message ].

因此，如果您想在 ng-messages 指令中显示多个 ng-message，您需要在 ng-messages 指令元素上添加 ng-messages-multiple 属性。

Docs Link

标记

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

Working Plunkr

更新

angular 文档更新后，我知道 ng-messages 不支持在 ng-messages 中显示多个 ng-message 错误，为了解决这个问题，我们应该ng-messages 元素上的 ng-messages-multiple 属性。

来自文档

默认情况下，ngMessages一次只会显示一个错误。但是，如果您希望显示所有消息，则可以在包含 ngMessages 指令的元素上使用 ng-messages-multiple 属性标志来实现此目的。

标记

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

Working Plunkr

Answer 3

在 Angular 1.4 中，您可以为 ng-message:

指定多个错误

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

见documentation

如何组合 ng-message 消息

How to combine ng-message messages

javascript

angularjs

error-handling

ng-messages