与角度材质一起使用时,有时不会显示角度消息
Angular-Messages sometimes aren't shown when used 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>
角度消息用于显示表单错误。问题是,当我同时使用required
和pattern
消息时,有时会显示它们,有时不会显示。当没有正则表达式检查时,它工作正常。该方案例如:
- 我有一个需要是数字的字段。我输入了错误的值,例如文本 - 显示错误消息。
- 我从字段中删除值,使其为空。现在应该显示
required
错误,但事实并非如此。但是,有一个红色边框通知错误。 - 现在我输入一个正确的值,例如 10 - 没有预期的消息。
- 再次,我输入了错误的值 - 现在显示错误。
上述情况可以重复并且始终为真 - 我需要输入正确的值才能再次显示错误。
我找到了一种解决方法,即使用 ng-messages
将md-auto-hide
添加到容器中,但现在即使在打开模态窗口后也会显示错误,这不是我想要的。有没有人遇到过类似的问题并找到了任何解决方案?我将不胜感激任何帮助。
编辑
我创建了一个提出问题的小提琴。
https://jsfiddle.net/t3xjrL19/2/
如果您同时使用 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>
老实说,在我看到这个问题之前,我会认为它会像您使用它一样工作,但也许您可以使用我的建议作为解决方法。
我已经分叉了你的小提琴来尝试它,它似乎工作得很好。你能检查一下吗?
参见工作分叉小提琴
希望对你有帮助
PS:对于您的用例,属性multiple
是不必要的,因为您将始终同时显示一条验证消息。
相关文章:
- 如果下载不成功,如何显示消息
- 如何在 jquery 中的速率按钮下方显示消息状态
- 删除所有可拖动元素后如何显示消息
- php表单验证n在表单上显示消息3秒钟并淡出
- 单击“点赞”按钮时显示消息
- javascript初学者-无法在屏幕上显示消息框
- 在表单提交后显示消息的方法
- 遍历列表,并在jQuery为空时显示消息
- 在jquery幻灯片登录表单上显示消息
- 如果文本筛选器在ng重复中未返回结果,则显示消息
- 以javascript显示消息框
- 在angular 1中,我如何检测angular是否受支持,并在屏幕上显示消息's不受支持
- 浏览器全屏显示,按键时不显示消息
- 选取随机数组元素,将其移除,并在没有更多可用元素时显示消息
- 仅当浏览器不是Google Chrome时显示消息
- 如果所有李都被隐藏,则显示消息
- 在提交表单和显示消息之前,如何检查表单输入是否全是数字
- 如果使用 JavaScript 登录失败,如何在登录页面中显示消息
- j查询验证未显示消息
- 为什么不显示消息