【问题标题】:Angular Material: not showing second validation messageAngular Material:不显示第二条验证消息
【发布时间】: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 个字符然后清空输入,则不会显示该消息。但如果我输入正确的值然后清空输入,则会显示消息。

【问题讨论】:

    标签: angularjs validation angular-material


    【解决方案1】:

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

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

    【讨论】:

    • 您发布的示例中的接线是,如果我在第一个输入上添加
      List description is too long
      ,它也会显示(如果输入为空)
    • 我在所有 input 上使用了相同的 name 属性,所以它的行为出乎意料。
    【解决方案2】:

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

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

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

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

    【讨论】:

      猜你喜欢
      • 2018-07-01
      • 1970-01-01
      • 2015-12-12
      • 1970-01-01
      • 2015-09-19
      • 2018-02-22
      • 2021-05-29
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多