与Angular-Material一起使用时,有时不会显示Angular-Messages

Question

我正在使用Angular-Messages与Angular-Material v1.0.9.我有一个md-dialog内部,我有一个表单与字段创建ng-repeat:

<form name="modal.dynamicForm" flex="80" layout="column">
    <md-input-container ng-repeat="field in modal.model.fields">
        <ng-form name="innerForm">
            <label>{{ field.label }}*</label>
            <input type="text" ng-model="field.value" name="{{ field.name }}" ng-pattern="field.pattern" required />
            <div ng-messages="innerForm[field.name].$error">
                <div ng-message="required">{{ 'fieldRequired' | translate }}</div>
                <div ng-message="pattern">{{ field.patternError }}</div>
            </div>
        </ng-form>
    </md-input-container>
</form>

Angular-Messages用于显示表单错误.问题是,当我同时使用required和pattern消息时,它们有时会显示,有时则不显示.没有正则表达式检查时它正常工作.该场景例如:

1. 我有一个需要数字的字段.我输入了错误的值,例如文本 - 显示错误消息.
2. 我从字段中删除了值,因此它是空的.现在required应该显示错误,但事实并非如此.但是,有一个红色边框通知错误.
3. 现在我输入一个正确的值,例如10 - 没有预期的消息.
4. 再次,我输入错误的值 - 现在显示错误.

上面的场景可以重复并且始终为真 - 我需要在再次显示错误之前输入正确的值.

我找到了一个解决方法,即添加md-auto-hide到容器中ng-messages,但现在错误显示在打开模式窗口之后,这不是我想要的.有没有人遇到类似的问题,并找到任何解决方案？我会感激任何帮助.

---

编辑

我创造了一个提出问题的小提琴.

https://jsfiddle.net/t3xjrL19/2/

Answer 1

<div ng-messages .../>如果您有条件地显示您同时使用ng-if或，您的问题应该消失ng-show。

使用示例ng-if（如果触摸字段表单并且出现验证错误，则显示 div）

<div ng-messages="innerForm[field.name].$error" ng-if="innerForm[field.name].$touched && innerForm[field.name].$error" multiple>
...
</div>

老实说，在我看到这个问题之前，我本以为它会像你使用的那样工作，但也许你可以使用我的建议作为解决方法。

我已经分叉了你的小提琴来尝试一下，它似乎工作得很好。你能检查一下吗？

查看正在工作的分叉小提琴

希望能帮助到你

PS：对于您的用例，属性multiple是不必要的，因为您始终会同时显示一条验证消息。