angular - 如何使 Angular Material 中的 mat-checkbox 不可点击

Question

我可以禁用我的 mat-checkbox，但希望保持启用时相同的 css。当输入文本具有值时，将选中该复选框，就像我在下面所做的那样:

<mat-checkbox [disableRipple]="true" [checked]="option.controls.text.value !== ''">
  <input #infoBox matInput formControlName="info" class="input-other" maxlength="100" type="text" [value]="option.controls.text.value">
</mat-checkbox>

Answer 1

如果我理解正确，用户应该永远无法手动切换复选框。相反，它将根据输入值以编程方式进行切换。

您可以非常简单地阻止默认的点击行为，这样当点击复选框时什么也不会发生:

<mat-checkbox [checked]="infoBox.value !== ''"
              [disableRipple]="true"
              (click)="$event.preventDefault()">

  <input #infoBox matInput type="text">

</mat-checkbox>