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

Question

我在我的 html 中添加了一个 mat-h​​int 元素。我只想在用户关注相应的表单字段时显示 mat-h​​int 并隐藏 focusout 的提示。如何为所有表单域实现这个场景。

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

Answer 1

您可以使用(focus)和(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>