与角度材质一起使用时,有时不会显示角度消息

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

本文关键字:显示 消息 一起      更新时间:2023-09-26

我正在使用带有角度材料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>

角度消息用于显示表单错误。问题是,当我同时使用requiredpattern消息时,有时会显示它们,有时不会显示。当没有正则表达式检查时,它工作正常。该方案例如:

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

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

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


编辑

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

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

如果您同时使用 ng-ifng-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>

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

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

参见工作分叉小提琴

希望对你有帮助

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