禁用matInput时隐藏mat提示

Question

我希望在启用相应的输入时只显示提示。

<mat-form-field appearance="outline">
<mat-label>Site Name</mat-label>
<input
matInput
[disabled]="disableEditSiteName()"
required
[(ngModel)]="site.siteName"
[value]="site.siteName"
/>
<mat-hint align="start"> Required </mat-hint>
</mat-form-field>

在上面，当disableEditSiteName((为true时，我想隐藏提示。这可以用*ngIf来完成，但是，如果有一种方法可以隐藏所有mat提示，如果它们的输入被设置为禁用，这将意味着代码重复更少。

Answer 1

1。使用*ngIf

在html代码中，disableEditSiteName()函数结果决定禁用或启用input。

因此可以将该值用于mat-hint。

如果disableEditSiteName()函数返回true，则应隐藏mat-hint；如果返回false，则应显示mat-hint。

这可以使用*ngIf来完成，如下所示。

<mat-hint align="start" *ngIf="!disableEditSiteName()"> Required </mat-hint>

2.使用CSS您可以使用CSS上的+选择器隐藏mat-hint，如下所示。

input[disabled] + .mat-hint {
display: none;
}