Unlock the full potential of p-checkbox with PrimeNG's trueValue and falseValue feature

I've been attempting to incorporate a p-checkbox in Angular8 with true and false values as strings instead of booleans. So I tested the following code:

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

However, I consistently encounter this error message:

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

This confusion arises because the documentation does mention trueValue and falseValue properties...

If anyone has any insights or solutions, your help would be greatly appreciated. Thank you.

angulartypescriptcheckboxangular8primeng

Answer №1

Just a heads up, the Input properties [trueValue] and [falseValue] are exclusively supported in PrimeNG version 12.2.0. These properties are not available in earlier versions.

Possible Solutions:

Solution 1: PrimeNG v12.2.0

You can either upgrade to the latest version of PrimeNG. (Note: Ensure compatibility with your current Angular version).

Solution 2: Versions before PrimeNG v12.2.0

Create an additional variable (to store string value) and use the onChange event to update this variable based on myCheckbox.

Remember to call change() within ngOnInit() to initialize the variable.

.component.ts

mycheckboxWithStringValue: string = '';

ngOnInit() {
  // Initialize 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>

Check out a Sample Demo on StackBlitz

Answer №2

Ensure that the imports in your code are accurate. Double check your app.module.ts file:

import {CheckboxModule} from 'primeng/checkbox';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
    CheckboxModule
  ],
  providers: [...],
  bootstrap: [...]
})
export class AppModule { }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Comparing the Calculation of CSS Selector Specificity: Class versus Elements [archived]

Closed. This question requires additional information for debugging purposes. It is not currently accepting answers. ...

htmlcssangular

Avoid inheriting Parent component styles in Child component

I am facing an issue with styling a child component independently from its parent. Specifically, I want to prevent the text alignment set in the parent component from affecting the child component. Despite trying different ViewEncapsulation types (Native, ...

angular

Strange behavior of Lambda function in Typescript

Within a larger class, I'm working with the following code snippet: array.map(seq => this.mFunction(seq)); After compiling using the tsc command, it becomes: array.map(function (seq) { return _this.mFunction(seq); }); Everything seems fine so f ...

javascriptnode.jstypescriptecmascript-5

Props used in styled components are effective, although they may trigger a warning message stating, "Warning: Received `true` for a non-boolean attribute `cen`."

Caution: A non-boolean attribute "cen" received a value of "true". If you intend to render it in the DOM, provide a string instead: cen="true" or cen={value.toString()}. While using Props in Styled-Component with TypeScript and Material-UI, everything func ...

reactjstypescriptmaterial-uistyled-components

Create a custom validation function that accepts additional parameters

At the moment, I have implemented the following code but I haven't utilized the extra data yet. create-room.component.ts import { Component, Inject, OnInit } from '@angular/core'; import { AbstractControl, FormBuilder, FormControl, FormGroup ...

angulartypescriptcustomvalidator

Type '{}' is lacking the subsequent attributes in type 'Record'

This is the code snippet I am working with: const data : Record<MediaType, Person[]> = {}; I encountered an error while initializing the 'data' object as shown above. The error message specifies that certain properties are missing from typ ...

typescript

Resolving ES6 type conflicts while compiling TypeScript to Node.js

I seem to be facing some challenges with the TypeScript 2 type system when working with Node.js. Let me explain the situation: I am compiling a small Node.js Express server written in TypeScript to plain ES5 for running under Node 6.10.0 (target: ES5 in ...

node.jstypescriptnpm

Using optional function arguments with destructured arguments in TypeScript can result in throwing an error

interface Type1 { attr1: string; attr2: string; } interface Type2 { attr1: string; attr2: string; attr3: string; // additional attribute } function fn(config: Type1 | Type2): void { // The error code is displayed above. I am ...

typescript

Tips for replacing HTTP response in Angular 4

One of my challenges involves using a specialized HttpService that inherits from Angular's native Http: export class HttpService extends Http { } I am trying to figure out how to intercept/override the response: My attempt to do this looks like: r ...

angular

What is the process for causing an Observable that already exists to emit specialized data?

Let's say I have an Observable that was created in the following way: let observable = of(mockData).pipe(delay(5000)); Is there a method to emit a new value to the observers who are currently subscribed to this observable at a later time? I came acr ...

angularrxjs

Styling the pseudo element ::part() on an ion-modal can be customized based on certain conditions

Looking for a solution regarding an ion-modal with specific CSS settings? I previously had the following CSS: ion-modal::part(content) { width: 300px; height: 480px; } Now, I need to adjust the height based on conditions: if A, the height should be lo ...

csstypescriptionic-framework

Angular ng-boostrap modal automatically refreshes upon detecting mouse movement with an embedded video

Currently, I am facing an issue with my Angular 7 ng-bootstrap modal. The problem arises when the modal, which includes a video player within an <iframe>, is moved to the production system. Whenever there is any mouse movement detected, the video get ...

javascriptangulartypescriptvideong-bootstrap

Utilize Pipe for every instance of a variable in the Controller

In my controller, I have multiple requests (POST, GET etc.) where the path includes an id parameter that needs to be a number string. I want to validate this parameter once and have it apply to all instances. Here is the current code snippet: @Get(&apo ...

typescriptrestnestjs

The culprit behind Angular 11 app error: Unidentified router outlet triggering 'No routes match' issue

In my Angular 11 application, I am utilizing a named router-outlet. The setup in my app.component.html file looks like this: <ng-container *ngIf="showGeneric"> <router-outlet name="general"> </router-o ...

angulartypescriptangular-routingrouter-outlet

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Currently, I am struggling with an issue where there is no built-in method to retry flaky tests in Jest. My tech stack includes Jest + TypeScript + Puppeteer. Has anyone else encountered this problem or have any suggestions for possible solutions? I attem ...

typescriptautomated-testsjestjspuppeteere2e-testing

Tips for displaying bar chart labels effectively with ChartJS

I am working on an Angular project and I would like to incorporate a barchart using ChartJS. The data for this chart can vary in size, sometimes being very large. One issue I have encountered is that when the number of data points is large, the labels ove ...

javascriptangulartypescriptchart.js

Troubleshooting: My Custom Checkbox Style Is Not Functioning

I recently customized my checkboxes using CSS, and while they are working fine in Chrome, I encountered issues with Internet Explorer and Edge. In my search for a solution, I came across this helpful reference: ref Here is the CSS code snippet that I used ...

csscheckbox

Premature conclusion of observable

I'm facing an issue with an element using the async pipe to subscribe to a Behavior Subject. showDiv$ = new BehaviorSubject<boolean>(false); showDivObv$ = this.showDiv$.asObservable().pipe( tap(() => console.log('here')), ...

angularrxjs

Looking for elements that match in an array

Currently working on a basic program that requires checking if the input string exists in the array. To simplify it, for example, if someone types 'Ai', I want the program to display all elements in the array containing the letters 'Ai&apos ...

arraysangularstringtypescript

Why does TypeScript combine the types of both indices when yielding a tuple?

In my generator function, I am yielding an array containing values of type [number, object]. By using a for...of loop to iterate over the function and destructuring the values with for (const [k, v] of iterator()), I noticed that the type of v is number | ...

typescriptdestructuringfor-of-loop