角度材质：同时输入提示文本和错误文本

Question

我完全复制了Angular Material email example。它有提示文本和错误文本。我的问题是错误文本会覆盖提示文本。如何保留提示文本？

如果我尝试将其更改为简单的跨度标记，则会使控件混乱。

Answer 1

Angular Material input行为遵循Material Design guidelines on text fields，其中指出：

  

如果不接受输入，文本字段可能会显示错误消息   在输入行下方，有关如何修复错误的说明。直到   错误已修复，错误替换了帮助文本。

您可以使用以下内容在提示文本下添加自定义错误消息容器：

<div class="text-danger margin-bottom-thin my-mat-hint">
    {{error}}<span>&nbsp;</span>
</div>

my-mat-hint定义为：

.my-mat-hint {
  line-height: 1.2em;
  transform: translateY(10px);
  font-size: 75%;
}

下面提供了Material Design文档的完整上下文。

帮助文本

  

帮助程序文本提供有关字段输入的上下文，例如输入的方式   将被使用。

     

它应该是持久的或仅在焦点上可见。

错误消息

  

如果不接受输入，文本字段可能会显示错误消息   在输入行下方，有关如何修复错误的说明。直到   错误已修复，错误替换了帮助文本。

     

如果可能，错误消息应出现在一行中。

Answer 2

我同意你的看法。错误消息将与提示重叠。以下是我要解决的问题。当存在与字段相关的错误时，我通过CSS隐藏提示，当错误得到修复时，样式将自动删除，提示将完整显示。

发生这种情况的方法是Angular为每个具有无效状态的输入元素添加一个类“mat-form-field-invalid”。因此，我们将使用类名来隐藏/显示无效元素的提示。

以下是解决问题的示例代码：

表单字段：

<mat-form-field>

        <input matInput required
               formControlName="materialName"
               name="materialName"
               id="materialName"
               placeholder="Enter Material Name..."/>

        <mat-hint align="start">Min 1</mat-hint>

        <div class="error-message" *ngIf="error">Error</div>

</mat-form-field>

<强> CSS：

只要表单字段出错，这就会隐藏提示：

.mat-form-field-invalid .mat-hint {
    display: none;
}

同时显示提示和错误：

如果您希望同时显示提示和错误，那么我们只需要进行单一样式调整。我们只是为它添加一个边距，而不是隐藏提示，以便在发生错误时将其与距离对齐。所以这是修改后的风格：

.mat-form-field-invalid .mat-hint {
    margin-top: 20px;
}

警告： 确保提示位于<mat-form-field></mat-form-field>标记内。如果将提示放在这些标记之外，则上述代码将不起作用。

祝你好运！