vendredi 24 novembre 2017

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

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" enter image description here

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 </span>
          </button>
          <button mat-menu-item>
            <mat-icon><i class="fa fa-trash" aria-hidden="true"></i></mat-icon>
            <span>Delete </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">  </mat-cell>
    </ng-container> 

    <ng-container cdkColumnDef="isPublish">
      <mat-header-cell *cdkHeaderCellDef> Publish </mat-header-cell>
      <mat-cell *cdkCellDef="let row">
        
        <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>

Please let me know if I need more description to my problem.

Thank you for your help.




Aucun commentaire:

Enregistrer un commentaire