angular - 仅在相应的输入焦点上显示 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>