Primeng: p-checkbox template/model driven behaviour disparity

[DavidMorgan92]

I'm submitting a ...

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

I originally submitted this as a support request here (https://forum.primefaces.org/viewtopic.php?f=35&t=51096) and was referred here. I assume the behaviour here is unintended so I'm submitting it as a bug.

Plunkr Case (Bug Reports)
http://plnkr.co/edit/YU4FA98JiXUwfSmnr30N?p=preview

Current behavior
Checkbox groups do not produce an array of selected values using the model driven forms method like they do with the template driven forms. An array of only the last checked value is produced.

Expected behavior
Checkbox groups work the same with model driven forms as with template driven forms.

• Angular version: 2.0.X
  4.0.0

• PrimeNG version: 2.0.X
  4.0.1

[logan2013]

any update? thank you

[fibinger]

Seems like the milestone 4.1.1 has been dropped for this issue. However I think it's crucial to solve it soon, many people are expecting it.
Would it possible to assign next milestone (4.1.2) to this issue and fix it with higher priority this time?
Thank you :)

[byebyebears]

Will this be fixed soon?

[alismart]

A workaround would be to bind the selectedValues array via [(ngModel)] to the p-checkbox control in reactive forms.

[fibinger]

@alismart Could you provide any little snippet to show how you do it in a nice way?
Probably that's a way to go, since we don't know when this bug is going to be fixed.

[spetex]

Just follow the official documentation:
https://www.primefaces.org/primeng/#/checkbox

The primary way of doing it works. The problem is when you want to use reactive forms instead.

[alismart]

Most often you won't send the values of reactive form controls directly via http service.
The workaround I came up with:
<p-checkbox formControlName="category" [(ngModel)]="selectedValues" name="category" value="CE" label="CE"> </p-checkbox>

Now in the hand-made object which will carry the final values via http service, would seem like this:
const sendData = { exist: formModel.exist, category: this.selectedValues.toString(), country: formModel.country }
It's not a solution but it comes to rescue :)

[ajambrovic]

Since I need to upgrade and since we're using reactive forms, I couldn't wait for the official fix so I've looked into the issue and found a solution.

I've forked the submitted plunk and added a fix- basically an override of the Checkbox component: http://plnkr.co/edit/2AKqkAJMCyNRV65ipUXt?p=preview so feel free to use it until the fix is patched in.

It seems that one line of code made all the difference :(

[fibinger]

@ajambrovic The idea is really good, is like it. But you should also extend the removeValue() method. Otherwise following result is possible (select all and then deselect all):

[ajambrovic]

@fibinger - Thanks for the info, you are correct; here's the updated Plunker: http://plnkr.co/edit/oLkWTs?p=preview

[yukiofera]

@ajambrovic Your solution is very nice. I have tested it however didn't work for me.
Take a look please:
https://github.com/primefaces/primeng/issues/3558
http://plnkr.co/edit/CdAa7OhnQSrkiUbEjEcP?p=preview

Test with you solution:
http://plnkr.co/edit/B2UEP2cDsXcuorxCy46F?p=preview

I think preselection doesn't working for model array.

[ajambrovic]

@yukiofera - the solution is basically the old working code, with the find method updated to ES6.

Preselection works in this case, but the error in your plunk is that you are not initializing preselected data correctly, check the updated plnkr: http://plnkr.co/edit/wxPvRpDmYzZSRSs7TVy0?p=preview; when comparing objects in JavaScript, they are the same only if they have the same reference.

[yukiofera]

@ajambrovic - Thanks for your reply.

You are right. I understood now. The content of the objects are equal but they have different references.
Thank you so much for your help!

[ajambrovic]

@yukiofera - Glad I could help :)

[cagataycivici]

This is because of;

https://github.com/angular/angular/issues/17685

Thinking of a workaround.

[cagataycivici]

Added a workaround but we need the formControl instance so with 4.2.2, you can do;

Checkbox can be used in a model driven form as well. In this case, due to an issue in Angular bind the formControl instance instead of using formControlName.

<!-- Wrong -->
<p-checkbox formControlName="cities"></p-checkbox>

<!-- Correct -->
<p-checkbox [formControl]="myFormGroup.get['cities']"></p-checkbox>

[coenraadf]

Been waiting for this fix for a while.

Just a note, your documentation is not 100% correct. What worked for me was:

[jimbarrett33]

I was able to get this to work with @coenraadf syntax .controls[cities] instead of .get['cities'].

For me the question remains, is this still a bug for model based forms? It seems to me it is since the PrimeNG docs suggest what seems to be a workaround for an angular issue issue that is closed.

Since that issue and this issue are closed is there no intention on fixing the PrimeNG control to work like this:

<p-checkbox formControlName="cities"></p-checkbox>

Or is there a separate issue out there that I was not able to find?

[achuou1]

@coenraadf thanks for pointing out there, documentation is still not updated. ".controls[cities]" works for me also.

[cagataycivici]

Docs fixed now.

[talamaska]

I don't think the suggested workaround is 100% correct. This wouldn't pass AOT building. I think it should be [formControl]="form.get('cities')"

[valentin78]

for me this
<p-checkbox [formControl]="myFormGroup.controls['cities']"></p-checkbox>
still not working. Change event not fired and value not tied to control

[khaledtamam]

any update ?

[antsteyer]

This is not working with FormArray control

[theabspro]

Can anyone post full example please? It's not working for me

HTML

TS

this.form = this.formBuilder.group({
       ......
       licenses: [],
       .......
});

  this.employeeService.read(id).subscribe((employee) => {
    this.form.patchValue(employee);
    this.loading = false;
  });