angular - 如何从打字稿中使角度输入控件只读？

Question

我在 HTML 中有以下内容

  <mat-form-field [appearance]="matFormFieldAppearance" style="margin-left:10px;width:50%">
    <mat-label>Type</mat-label>
    <mat-select formControlName="TypeId" required>
      <mat-option *ngFor="let item of TypeList" [value]="item.Id">
        {{item.Title}}
      </mat-option>
    </mat-select>
  </mat-form-field>


  <mat-form-field [appearance]="matFormFieldAppearance" style="margin-left:10px;width:50%">
    <mat-label>Category</mat-label>
    <mat-select formControlName="CategoryeId" required>
      <mat-option *ngFor="let item of CategoryList" [value]="item.Category">
        {{item.Category}}
      </mat-option>
    </mat-select>
  </mat-form-field>

在 TypeScript 中，MatDialog 接收数据，如果 Field1 不为空，我希望将表单字段放入 ReadOnly

this.K = this.matdialogData;
if (this.K.Field1 !== null)
{
          this.myForm.controls.CategoryeId.ReadOnly(); //Something like this
          this.myForm.controls.TypeId.ReadOnly();//Something like this
}

标签： angular

Answer 1

您可以禁用这些字段以使其成为只读。

this.myForm.controls.CategoryeId.disable();
this.myForm.controls.TypeId.disable();

此外，您可以使用样式 pointer-events-none 将类添加到 mat-form-field 以使字段只读。