скрыть мат-подсказку, когда matInput отключен

#css #angular #angular-material

#css #угловой #angular-материал

Вопрос:

Я хочу, чтобы подсказка отображалась только тогда, когда включен соответствующий ввод.

         <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 , однако, если бы был способ скрыть все мат-подсказки, если их ввод был отключен, это означало бы меньшее количество повторений кода.

Ответ №1:

1. Использование *ngIf

В вашем html-коде disableEditSiteName() функция result решает отключить или включить input .

Таким образом, вы можете использовать это значение для mat-hint .

Если disableEditSiteName() функция возвращает true , вы должны скрыть mat-hint , а если она возвращает false, вы должны показать mat-hint .

Это можно сделать *ngIf следующим образом.

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

2. Использование CSS
Вы можете скрыть mat-hint с помощью селектора в CSS следующим образом.

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

1. Привет, Дерек, спасибо за этот ответ. Как я задавал в вопросе, но, возможно, недостаточно четко, я бы предпочел не повторять *ngIf для каждого поля мат-формы и надеялся, что есть способ сделать это для всех подсказок и их соответствующих входных данных на основе отключенного состояния ввода.

2. Я обновил свой ответ, используя CSS . input[disabled] .mat-hint { display: none; } будет работать.

3. Затем вы можете попробовать сделать это с возвращаемым значением функции, например input[disabled="true"] .mat-hint { display: none; }

4. Извините, я удалил свой предыдущий комментарий, в котором говорилось, что он работал, input[required] .mat-hint { display: none; } поскольку оказалось, что он не работает (я просматривал входные данные без подсказок). Вышеупомянутое все еще не работает.

5. Я также проверял input[disabled="true"] ~ .mat-hint { display: none; } При проверке страницы в Chrome, кажется, что ввод и мат-подсказка имеют отдельных родителей. Родительский элемент ввода mat-form-field-flex , а родительский элемент мат-подсказки mat-form-field-subscript-wrapper .