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

【问题标题】：Display Mat-hint only on corresponding input focus仅在相应的输入焦点上显示 Mat-hint
【发布时间】：2020-12-22 08:59:14
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-material

【解决方案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>

【讨论】：

我喜欢这个解决方案。我已经将这些东西用于其他用例。我面临的问题略有不同。我有一个批量保存的 formArray。如果我设置这个声明这个变量所有的输入都会受到影响。如果我修改对象我的ngrx存储将受到影响。因此混淆了解决此类问题的闲置解决方案
看来你要处理formArray的多项。您可能正在使用*ngFor 进行迭代。对于这种情况，您可以为每个项目创建一个单独的变量并独立执行相同的操作。更新答案和此处的链接，这将有助于实现这一点。 stackblitz.com/edit/angular-ckqmvs
是的，这是我正在使用的解决方案，通过在每个对象中添加属性。我正在寻找解决方案而不修改我的实际对象。但没关系，我现在会坚持更改对象。感谢您的帮助

【解决方案2】：

我只通过 css 解决了这个问题。不集中时隐藏。

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

【讨论】：