Angular Material's mat-autocomplete input is not getting disabled as expected

Question

I'm trying to disable an Angular Material Autocomplete component. I would have expected to just be able to set disabled on the input, but that does nothing. (I also tried setting disabled on mat-form-field and mat-autocomplete.) Setting matAutocompleteDisabled on input prevented the options from showing, but still allowed typing in the field. Setting readonly on input prevented typing, but it doesn't change the UI, so seems like that will be confusing for the user. Is this a bug, or am I missing something?

Here's the closest I've come so far, using readonly (and disabled isn't working as expected)

<form class="example-form">
  <mat-form-field class="example-full-width">
    <input type="text"
           disabled readonly
           placeholder="Pick one"
           aria-label="Number"
           matInput
           [formControl]="myControl"
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

Answer 1

You should use formControl to set it, something like:

this.formGroupName.controls['myControl'].disable()

Answer 2

You can do css trick for this purpose.

Apply some class to parent tag of input. In you case upper tag is <mat-form-field class="example-full-width"> so i add disable-block class in this. And applied below css.

.disable-block {
    pointer-events: none;
    opacity: .7;
}

Full code here.

HTML

<form class="example-form">
  <mat-form-field class="example-full-width disable-block">
    <input type="text" disabled readonly placeholder="Pick one" aria-label="Number" matInput [formControl]="myControl" [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let option of options" [value]="option">
        {{option}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>
</form>

CSS

.disable-block {
  pointer-events: none;
  opacity: .7;
}

If you want more lighter text field then you can decrease opacity to .6 or .5 or more want you want.

Hope this will solve you problem.