如何组合ng消息消息

Question

我是AngularJS的新手，但我已经搜索了很多遍，找不到这个问题的有效答案，也许这是不可能的方式，我在脑海中。

我想要的是能够组合错误条件，以便在ng-讯息模块中使用更通用的错误消息。这节省了我们大量的时间来维护文本，因为我们的应用程序是多语言的。在我的示例中，最好将最小长度、最大长度和模式组合在一起，并让它引用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

我确实意识到我可以使用单个regex模式表达式，但是上面的验证严格地是为了重现问题并展示一个示例。我还有其他的验证，我想结合起来，不能用一个单一的模式来表达。

Answer 1

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

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

Docs链接

标记

<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-messages中显示多个ng-message错误，为了解决这个问题，应该在ng-messages元素上设置ng-messages-multiple属性。

来自Docs的

默认情况下，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>

工作普朗克尔

Answer 2

在角1.4中，可以为ng消息指定多个错误：

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

请参阅文档

Answer 3

为了使ng消息更通用，您可以将所有错误消息保存在一个地方，并在需要时使用它。您可以使用ng消息包括。

查看：重用和重写错误消息

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

我想你会想要实现这一点的。