如何在ionic中的错误图标悬停时显示验证错误信息作为工具提示

Question

我在一个ionic应用程序中使用引导验证。它工作得很好，它显示了文本框内的错误图标和文本框下的错误消息。当鼠标悬停在文本框中的错误图标上时，如何更改它以工具提示的形式显示错误信息?我不想在文本框下面显示错误信息。

Answer 1

我可以使用angular material工具提示在ionic的错误图标悬停时显示验证错误信息。请查看下面的代码

<ion-col size="12">
<ion-item lines="none">
<ion-label>Name</ion-label>
</ion-item>
<ion-item line="inset">
<ion-input formControlName="name">
</ion-input>
<mat-icon [ngStyle]="{'color':'#dc3545'}" class="error-icon"
*ngIf="empForm.get('name')?.errors && addQuationForm.get('name')?.touched"
matTooltip="Name is required">error
</mat-icon>
</ion-item>
</ion-col>

注意:不要忘记在你当前的工作模块导入部分添加有角材质的工具提示模块和Mat图标模块，如

@NgModule({
declarations: [],
imports: [MatTooltipModule,MatIconModule],
exports: [],
})
export class AppModule { }