How to disable a text area or mat-form-field in the same HTML (Angular 9)

Issue

I am using Angular 9 with angular Material Reactive Forms. I want to disable the fields, but without using the disabled status on the formControl, just only using HTML instead of programmatically in ts.

My Html:

<form name="nameForm" [formGroup]="nameForm" fxLayout="column">
    <mat-form-field fxFlex="50" class="m-4">
        <input matInput name="startTime" formControlName="startTime" placeholder="{{'DATE.START' | translate}}"  type="date">
    </mat-form-field>
    <mat-form-field fxFlex="30" class="m-4">
        <input matInput name="period" formControlName="period" placeholder="{{'TITLE.PERIOD' | translate}}"  type="number" step="0.1">
    </mat-form-field>
    <mat-form-field fxFlex="20" class="m-4">
        <input matInput name="range" formControlName="range" placeholder="{{'TITLE.RANGE' | translate}}"  type="number" step="0.1">
    </mat-form-field>
</form>

My ts:

ngOnInit(): void {
      this.nameForm = this.createNameForm();

... some code ...
}

private createNameForm() {
      return this.formBuilder.group({
          startTime: new FormControl(this.startTime, []),
          period: new FormControl(this.period, []),
          range: new FormControl(this.range, []),
      });
  }

... some code ...

I came across this doubt because some questions like this one (How to disable a text area or mat-form-field) has programmatic answers, and I would like to know if it can be solved using exclusively the Html. I know [disabled]="true" does not work, but maybe with a different directive?.

I hope it's clear enough and thanks in advance.

Solution

I think that the disabled directive is not valid for the input (it would work with a select or text-area for example ) but to disable the input we can use the readonly directive

[readonly]="true"
[readonly]="method()"
[readonly]="variable"

Although, if you need to disable it, another solution would be

[attr.disabled]="true"
[attr.disabled]="method()"
[attr.disabled]="variable"

I've tried both and they work :)

Answered By - henarmd