0

I need to programmatically disable the input of a mat-autocomplete. I dont mean to disable the autocomplete functionality, I mean to disable the input.

Here my template:

<mat-form-field>
 <input
  matInput
  [formControl]="filterControl"
  [matAutocomplete]="auto"
  [disabled]="isDisabled"
  [ngClass]="isDisabled ? 'disabled' : ''"
  (focus)="onFocus()"
/>
<mat-autocomplete
#auto="matAutocomplete"
(opened)="optionListOpened()"
(closed)="optionListClosed()"
>
 <mat-option *ngFor="let option of showOptions | async" [value]="option.label">
   {{ option.label }}
 </mat-option>

Where isDisabled property can be true or false.

I doesnt work. I simply tried this:

disabled="true"

and get this error: Type 'string' is not assignable to type 'boolean'

I tried this workaround, but css class is being applied after focusOut and I need it from the beggining.

[ngClass]="isDisabled ? 'disabled' : ''"

.disabled {
  pointer-events: none;
  background-color: lightgrey;
}
Jmainol
  • 357
  • 4
  • 18

0 Answers0