PrimeNG dataTable: Using a p-checkbox inside a p-column causes Error

Viewed 16677

I have this Datatable that works fine:

<p-dataTable [value]="myObjects" [rows]="10" [paginator]="true" [pageLinks]="3">
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="status" header="Is available ?">
        <ng-template let-col let-obj="rowData" pTemplate="body">
            <input type="checkbox" [checked]="obj.status" [(ngModel)]="obj.status" />
        </ng-template>
    </p-column>
</p-dataTable>

Now I would like to replace the input type="checkbox" with a PrimeNG checkbox:

<p-dataTable [value]="myObjects" [rows]="10" [paginator]="true" [pageLinks]="3">
    <p-column field="name" header="Name"></p-column>
    <p-column field="size" header="Size"></p-column>
    <p-column field="status" header="Is available ?">
        <ng-template let-col let-obj="rowData" pTemplate="body">
            <p-checkbox [(ngModel)]="obj.status"></p-checkbox>
        </ng-template>
    </p-column>
</p-dataTable>

This causes the following error (in the browser console). Why ? What am I missing ?

core.es5.js:1020 ERROR Error: Uncaught (in promise): TypeError: this.model.indexOf is not a function
TypeError: this.model.indexOf is not a function
    at Checkbox.isChecked (http://localhost:4200/vendor.bundle.js:110341:45)
    at Checkbox.writeValue (http://localhost:4200/vendor.bundle.js:110362:29)

Full stacktrace here

2 Answers

Use all attributes of p-checkbox

<p-checkbox name="checkbox" value="isAC" label="All Colors" [(ngModel)]="selectedAllColors" [ngModelOptions]="{standalone: true}" id="al" binary="true"></p-checkbox>

and more importantly, don't forget to include [ngModelOptions]="{standalone: true} as well.

Related