angular - Interaction with a matSuffix mat-checkbox in a mat-form-field

Question

I have an input in my mat-form-field that has a mat-checkbox in matSuffix.

INFO: The input will be constantly disabled.

<mat-form-field class="pointer" (click)="...">
  <mat-label>TEST ...</mat-label>
  <input matInput class="pointer" type="text" disabled>
  <mat-checkbox matSuffix color="accent" class="ml-4"></mat-checkbox>
</mat-form-field>

I wish I could interact with the mat-checkbox without necessarily clicking on it directly, but on the global mat-form-field.

If I click here:

Result:

I suppose that an event (click) on the mat-form-field would be necessary, but I do not know how to proceed.

Thanks for your help.

Answer 1

您可以像这样使用 [disabled] 属性：

<mat-checkbox matSuffix color="accent" class="ml-4" [disabled]="yourBoolean"></mat-checkbox>

'yourBoolean'是一个可以初始化为 false 的变量。您可以随时在代码中的其他位置更改此布尔值的值，复选框将动态激活或停用

Answer 2

我不太明白你需要什么，但我认为就是这样：

HTML

<mat-form-field fxFlex="100" class="pointer" (click)="disabled=!disabled">
 <mat-label>My label</mat-label>
  <input matInput class="pointer" type="text"  >
 <mat-checkbox matSuffix color="accent" [checked]="disabled" class="ml-4"></mat- 
 checkbox>

TS

disabled=false;