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](stackoverflow.com/a/47795277) — karthikeyan
– karthikeyan, Commented Jul 10, 2019 at 10:06

David Cyr · Accepted Answer · 2017-11-24 15:39:39Z

6

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.

answered Nov 24, 2017 at 15:39

David Cyr

2631 gold badge6 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related