如何组合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>

我创建了这个简单的Plunk来说明我想要做的事情:

编辑1

我确实意识到我可以使用单个正则表达式模式表达式,但上述验证严格来重现问题并显示一个示例.我还有其他一些我想要组合的验证,无法用单一模式表达.

Answer 1

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元素有属性.

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

工作Plunkr