5

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

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

我创建了这个简单的 Plunk来说明我正在尝试做的事情：

编辑 1

我确实意识到我可以使用单个正则表达式模式表达式，但上述验证严格用于重现问题并显示示例。我有其他的验证我想结合起来，不能用单一的模式来表达。

4

3 回答 3

5

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

因此，如果您想显示多个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>

工作Plunkr

更新

在角度文档更新后，我知道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

于 2015-04-16T11:29:04.067 回答
3

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

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

查看文档

于 2015-12-28T20:49:46.247 回答
1

为了使您的 ng-message 更通用，您可以将所有错误消息保存在一个地方并在需要时使用它。您可以使用 ng-message-include 执行此操作。

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

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

我想你会喜欢实现这一点。

于 2015-04-16T10:47:41.683 回答