Question

我在HTML中添加了一个mat-hint元素。我只想在用户将焦点放在相应的表单字段上时显示mat-hint，并在焦点上隐藏提示。如何在所有表单域中实现此方案。

<mat-hint align="end">Max 50 characters</mat-hint>

Answer 1

您可以将(focusout)和focusState与称为<input name="date" type="text" (focus)="focusState = true" (focusout)="focusState = false"> <mat-hint align="end" *ngIf="focusState">Max 50 characters</mat-hint>的引用一起使用

<div *ngFor="let item of array">
   <input #item name="date" type="text" (focus)="item.alt = true" (focusout)="item.alt = false">
   <mat-hint align="end" *ngIf="item.alt">Max 50 characters</mat-hint>
</div>

编辑

处理多个项目

react native

Answer 2

我只用 css 解决了这个问题。不专注时隐藏。

.mat-form-field:not(.mat-focused) .mat-hint {
    display: none;
}

仅在相应的输入焦点上显示Mat-hint

2 个答案:

编辑