javascript - 如何合并 ng-message 消息

Question

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

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

编辑 1

我确实意识到我可以使用单个正则表达式模式表达式，但上述验证严格来说是为了重现问题并展示示例。我有其他验证，我想结合使用单个模式无法表达的验证。

Answer 1

ng-messages 将在 ng-messages 指令元素中显示错误消息，但它的限制是您只能显示单个错误 ng-message 在 ng-messages div 中。

所以如果你想在 ng-messages 指令中显示多个 ng-message 你需要添加 ng-messages-multiple 属性ng-messages 指令元素。

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