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-hint的方法（如果将它们的输入设置为disable的话），这将意味着更少的代码重复。

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;
}

禁用matInput时隐藏隐藏提示

1 个答案: