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 div中显示单个错误ng-messages。

因此，如果您想在ng-message指令中显示多个ng-messages，则需要在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

<强>更新

在有角度的文档更新后，我发现ng-messages不支持在ng-message内显示多个ng-messages错误，为解决此问题我们应该{{1} } ng-messages-multiple元素上的属性。

来自文档

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

<强>标记

ngMessages

Working Plunkr

Answer 2

在Angular 1.4中，您可以为ng-message指定多个错误：

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

请参阅documentation

Answer 3

为了使您的ng-message更通用，您可以将所有错误消息保存在一个位置，并在需要时使用它。您可以使用ng-message-include。

执行此操作

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

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

我想你想实现这个。

如何组合ng-message消息

3 个答案: