How to add a checkbox in a Material Design table in Angular 4

Question

I would like to add a checkbox in a Material Design table in Angular 4, it would be under the column Publish. The problem is that the checkbox doesn't show in the table just the text with and error message

"No value accessor for form control with unspecified name attribute"

Here is my code:

<div class="mat-table-container mat-elevation-z8">
  <mat-table #table [dataSource]="assessmentManualList">

    <ng-container cdkColumnDef="documentID">
      <mat-header-cell *cdkHeaderCellDef>  </mat-header-cell>
      <mat-cell *cdkCellDef="let row">
        <button mat-icon-button [matMenuTriggerFor]="menu">
          <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu">
          <button mat-menu-item>
            <mat-icon><i class="material-icons">content_copy</i></mat-icon>
            <span>Copy {{row.DocumentID}}</span>
          </button>
          <button mat-menu-item>
            <mat-icon><i class="fa fa-trash" aria-hidden="true"></i></mat-icon>
            <span>Delete {{row.documentID}}</span>
          </button>
        </mat-menu>
      </mat-cell>
    </ng-container>  

    <ng-container cdkColumnDef="textDetail">
      <mat-header-cell *cdkHeaderCellDef> Document </mat-header-cell>
      <mat-cell *cdkCellDef="let row"> {{row.textDetail}} </mat-cell>
    </ng-container> 

    <ng-container cdkColumnDef="isPublish">
      <mat-header-cell *cdkHeaderCellDef> Publish </mat-header-cell>
      <mat-cell *cdkCellDef="let row">
        {{row.isPublish}}
        <md-checkbox class="example-margin" [(ngModel)]="row.isPublish"> 
Checked </md-checkbox>  
      </mat-cell>            
    </ng-container> 
    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let row; columns: displayedColumns;" (click)="selectedRow(row)" [class.active]="isSelected(row)"></mat-row>
  </mat-table>
</div>

[I fixed this error by adding the name="fieldName" ngDefaultControl attributes to the element that carries the [(ngModel)] attribute](https://stackoverflow.com/a/47795277) — karthikeyan, Jul 10 '19 at 10:06

score 5 · Answer 1 · answered Nov 24 '17 at 15:39

Found the issue I copied the code from angular.material.io where they didn't update their examples to use the latest version of material design. So I had the following code for the checkbox:

<md-checkbox class="example-margin" [(ngModel)]="row.isPublish"> 
Checked </md-checkbox>

Changed the md to mat:

<mat-checkbox [checked]="row.isPublish"></mat-checkbox>

Fixed the problem.

How to add a checkbox in a Material Design table in Angular 4

1 Answers1