与 Angular-Material 一起使用时，有时不会显示 Angular-Messages答案

【问题标题】：Angular-Messages sometimes aren't shown when used with Angular-Material与 Angular-Material 一起使用时，有时不会显示 Angular-Messages
【发布时间】：2016-07-06 10:29:20
【问题描述】：

我正在使用带有 Angular-Material v1.0.9 的 Angular-Messages。我有一个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 消息时，它们有时会显示，有时不显示。当没有正则表达式检查时，它工作正常。场景例如：

我有一个需要是数字的字段。我输入了错误的值，例如一条文本 - 显示错误消息。
我从字段中删除值，使其为空。现在应该显示required 错误，但事实并非如此。不过，有一个红色边框通知错误。
现在我输入了一个正确的值，例如10 - 没有预期的消息。
再次，我输入了错误的值 - 现在显示错误。

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

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

编辑

我创建了一个提出问题的小提琴。

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

【问题讨论】：

试一试...你可以在你的 div ng-messages 中设置多个，例如：<div ng-messages="innerForm[field.name].$error" multiple>
感谢您的回答。我忘了提那个。我也试过用这个，不幸的是效果是一样的。
嗯......所以不知道，对不起，也许你可以把你的代码放在一个 plunker 中。在我正在工作的应用程序中，我有相同的用例（一个需要和一个模式验证）并且工作正常。
我稍后会尝试准备 plunker :)
添加了一个 jsfiddle - 如果您按照场景中的步骤操作，您应该能够重现问题

标签： javascript angularjs angular-material

【解决方案1】：

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

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

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

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

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

查看工作分叉fiddle

希望对你有帮助

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

【讨论】：