如何在相同的HTML (角9)中禁用文本区域或垫窗体字段

Question

我使用角9与角材料反应形式。我想禁用这些字段，但不使用formControl上的禁用状态，只需在ts中使用HTML而不是以编程方式。

我的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>

我的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 ...

我遇到了这样的疑问，因为像这个(How to disable a text area or mat-form-field)这样的问题有编程的答案，我想知道是否可以完全使用Html来解决这个问题。我知道[disabled]="true"不起作用，但也许有不同的指令？

我希望一切都足够清楚，提前感谢。

Answer 1

我认为禁用的指令对输入无效(例如，它将用于选择或文本区域)，但是要禁用输入，我们可以使用只读指令。

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

尽管，如果您需要禁用它，另一个解决方案是

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

我试过这两种方法，它们都有效:)

Answer 2

我已经尝试过文本区域的[disabled] = 'true'和[readonly] = 'true'。

只有[readonly]属性在所有角度的情况下都能很好地工作。