Angular-与 Angular-Material 一起使用时有时不显示消息

Question

我正在使用 Angular-Messages with 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-消息用于显示表单错误。问题是，当我同时使用 required 和 pattern 消息时，它们有时会显示，有时不会。当没有正则表达式检查时它工作正常。场景例如：

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

上述情况可以重复，并且始终为真 - 我需要输入正确的值才能再次显示错误。

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

编辑

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

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

Answer 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>

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

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

See working forked fiddle

希望对您有所帮助

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

Angular-与 Angular-Material 一起使用时有时不显示消息

Angular-Messages sometimes aren't shown when used with Angular-Material

javascript

angularjs

angular-material