PrimeNG - Use trueValue/falseValue on p-checkbox

Issue

I'm trying to implement a p-checkbox on Angular8 with true and false value as string and not as boolean. So I tried this code below:

<p-checkbox [(ngModel)]="mycheckbox" name="mycheckbox" inputId="mycheckbox" 
[trueValue]="'CB_OUI'" [falseValue]="'CB_NON'"></p-checkbox>

but I always get this error message:

Can't bind to 'trueValue' since it isn't a known property of 'p-checkbox'.

but I don't understand why because in the doc there are trueValue and falseValue...

If anyone has an idea, thx for your help.

Solution

FYI, [trueValue] and [falseValue] Input properties are only supported for PrimeNG v12.2.0. As these properties are not found in previous versions.

---

Solution(s)

Solution 1: For PrimeNG v12.2.0

Either you have to install the latest version of PrimeNG. (Note: Beware of the compatibility with your current Angular version).

Solution 2: For before PrimeNG v12.2.0

Create another variable (store string value) and apply onChange event to update the variable based on myCheckbox.

Make sure to call change() in ngOnInit() to initialize the variable.

.component.ts

mycheckboxWithStringValue: string = '';

ngOnInit() {
  // Init mycheckboxWithStringValue
  this.change();
}

change() {
  this.mycheckboxWithStringValue = this.mycheckbox ? 'CB_OUI' : 'CB_NON';
}

.component.html

<p-checkbox
  [(ngModel)]="mycheckbox"
  (onChange)="change()"
  name="mycheckbox"
  inputId="mycheckbox"
  binary="true"
></p-checkbox>

Sample Demo on StackBlitz

Answered By - Yong Shun