javascript - 与 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. 再次，我输入了错误的值 - 现在显示错误。

上面的场景可以重复并且总是正确的——我需要输入一个正确的值才能再次显示错误。

我找到了一种解决方法，即使用 ng-messages 将 md-auto-hide 添加到容器中，但现在即使在打开模式后也会显示错误这不是我想要的窗口。有没有人遇到过类似的问题并找到任何解决方案？我将不胜感激。

---

编辑

我创建了一个 fiddle 来解决这个问题。

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>

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

我已经 fork 你的 fiddle 来尝试它，它似乎工作得很好。你能检查一下吗？

See working forked fiddle

希望对你有帮助

PS:对于您的用例，属性 multiple没有必要，因为您总是会同时显示一条验证消息。