Angular Material：不显示第二条验证消息

Posted 2023-02-24

【中文标题】Angular Material：不显示第二条验证消息

【英文标题】：Angular Material: not showing second validation message

【发布时间】：2016-03-27 14:11:32

【问题描述】：

当我对输入标签应用了两个验证时，我遇到了 md-input-container 问题。我正在使用 ng-model-options=" updateOn: 'blur' "，但即使没有它也会出现问题。例如：

<md-input-container>
    <label>Description:</label>
    <input name="description" ng-model="list.description" type="text" ng-minlength="3" required />
    <div ng-messages="listForm.description.$error">
        <div ng-message="minlength">List description is too short</div>
        <div ng-message="required">List description is required</div>
    </div>
</md-input-container>

如果我键入“Te”然后按 TAB，则会显示 ng-minlength 验证消息。但是，如果我将输入留空，则不会显示所需的消息（但输入已被装饰，应该如此）。

同样的行为在这里可以重现 (https://material.angularjs.org/latest/demo/input)。在 Erros -> Description 输入中，如果我键入超过 30 个字符然后清空输入，则不会显示该消息。但如果我输入正确的值然后清空输入，则会显示消息。

【参考方案1】：

在我看来minlength 和required 是一回事。所以你必须是其中之一。请参阅示例链接。 http://codepen.io/next1/pen/PNjdBz

即使您没有在input 中指定ng-minlength，它也会在ng-message 中显示错误，因为它是同一件事。所以我认为你应该使用ng-message-exp 来检查这两个条件。当您正在寻找 minlength 和 required 时，您参考了与 maxlength 和 required 相关的材料设计文档的链接。

【讨论】：

您发布的示例中的接线是，如果我在第一个输入上添加 List description is too long，它也会显示（如果输入为空）

我在所有 input 上使用了相同的 name 属性，所以它的行为出乎意料。

【参考方案2】：

这是 Angular Material 和 ngMessages 的一个已知问题。

如果您想收到有关任何进展的通知，请订阅以下问题。我也是这样……

https://github.com/angular/material/issues/6767

如果您必须立即解决这个问题，那么您可以使用那里描述的解决方法，但请记住它在美学上并不完美。