Отключение пользовательского ввода внутри mat-form-field не работает

Question

Когда вы используете стандартный ввод внутри поля mat-form в реактивной форме и отключаете форму, используя

form.controls.get('id').disable();

Ввод отображается серым цветом и получает Подчеркнутый пунктир, как это.

У меня есть многократно используемый компонент формы, который я хочу иметь возможность отключить свой компонент таким же образом, и давая Это тот же стиль.

Однако вызов his._renderer.setProperty(this.inputElement.nativeElement, 'disabled', isDisabled); в setDisabledState ничего не отключает. Как это исправить?

Вот мой шаблон компонента и код.

<mat-form-field class="full-width" #formField>
        <mat-label>{{ label }}</mat-label>
        <mat-icon class="search-icon" matSuffix>keyboard_arrow_down</mat-icon>
        <input type="text" matInput #inputElement [formControl]="tenantListFormControl">
    </mat-form-field>



export class TenantPickerComponent implements OnInit, OnDestroy, ControlValueAccessor {

  @ViewChild('inputElement', {static: true}) inputElement: ElementRef
  @ViewChild('formField', {static: true}) formField;

  tenantListFormControl = new FormControl();

  constructor(
    private tenantListService: TenantListService,
    public _renderer: Renderer2
  ) {}

  registerOnChange(fn: any): void {
    this.propagateChange = fn;
  }

  propagateChange = (_: any) => {};

  registerOnTouched(fn: any): void {
  }

  writeValue(obj: any): void {
    this.tenantListFormControl.setValue(obj);
  }

  setDisabledState(isDisabled: boolean): void {
      this._renderer.setProperty(this.inputElement.nativeElement, 'disabled', isDisabled);
  }

}