1

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:

enter image description here

Result:

enter image description here

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.

Quentin
  • 1,865
  • 2
  • 24
  • 40

2 Answers2

1

You can use the [disabled] attribute like this : 

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

'yourBoolean' is a variable who can be initialized to false. At any time, you can change the value of this boolean somewhere else in your code and the checkbox will activate or deactivate dynamically

ChillAndCode
  • 188
  • 2
  • 12
1

I don't understand well what you need, but i think that's it:

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;
Leandro
  • 189
  • 7