Error using mat-checkbox inside an editable material table

Question

I've created an editable using Angular Material, when a row is in an editable state each cell will show an input field depending on what data type is being displayed, e.g. if the cell is a string it will have an input field of type 'text'.

<mat-form-field>
   <mat-label> {{column}} </mat-label>
   <input type="text" matInput [(ngModel)]="element[column]"/>
</mat-form-field>

This works fine when using either text or number but I want to have a boolean checkbox as well, but when I try to use mat-checkbox instead of input I get an error 'mat-form-field must contain a MatFormFieldControl.'. Even though I'm using ngModel the same as I am with text and numbers.

<div *ngIf="column === 'checkType'>
   <mat-checkbox [(ngModel)]="element[column]"></mat-checkbox>
</div>

Any help would be greatly appreciated.

iamaword iamaword · Accepted Answer · 2021-01-13T05:45:32

Currently you can't use mat-checkbox inside of a mat-form-field (not supported): see https://github.com/angular/components/issues/7891

So when you use mat-checkbox, don't nest it inside a mat-form-field. You can give it a formControlName or [(ngModel)] directly, without the mat-form-field.

<mat-checkbox [(ngModel)]="myVariable">

Error using mat-checkbox inside an editable material table

1 Answers