[FIXED] trueValue anf falseValue not working in checkbox

Issue

I am working on angular app and using treetable of primeng.I am using primng v9. my code is as follows:

<p-carousel
  [value]="products"
  [numVisible]="3"
  [numScroll]="3"
  [circular]="false"
  [responsiveOptions]="responsiveOptions"
>
  <ng-template pTemplate="header">
    <h5>Basic</h5>
  </ng-template>
  <ng-template let-product let-i="index" pTemplate="item">
    <div class="product-item">
      <div class="product-item-content">
        <div class="p-mb-3"></div>
        <div>
          <p>{{ product.id }}</p>
          <h4 class="p-mb-1">{{ product.name }}</h4>
          <h6 class="p-mt-0 p-mb-3">${{ product.price }}</h6>
          <span
            [class]="
              'product-badge status-' + product.inventoryStatus.toLowerCase()
            "
            >{{ product.inventoryStatus }}</span
          >
          <div class="car-buttons p-mt-5">
            <p-button
              type="button"
              styleClass="p-button p-button-rounded p-mr-2"
              icon="pi pi-search"
            ></p-button>
            <p-button
              type="button"
              styleClass="p-button-success p-button-rounded p-mr-2"
              icon="pi pi-star"
            ></p-button>
            <p-button
              type="button"
              styleClass="p-button-help p-button-rounded"
              icon="pi pi-cog"
            ></p-button>
          </div>
        </div>
      </div>

      <div
        *ngFor="let cityData of myData; let i = index"
        style="position: relative;margin-top: 2rem;border-bottom: 1px solid #4E5668;"
      >
        <div style="display: flex; margin:1em; ">
          <span style="flex:1;">{{ cityData.name }}</span>
          <span style="flex:1;">
            <p-checkbox
              name="product"
              binary="true"
              [trueValue]="1"
              [falseValue]="0"
              [ngModel]="cityData.status[product.id]"
              (onChange)="toggleVisibility($event, cityData, product)"
              #checkbox
            ></p-checkbox>
          </span>
        </div>
      </div>
    </div>
  </ng-template>
</p-carousel>

Stackblitz:
https://stackblitz.com/edit/primeng-carousel-demo-wwfs9w?file=src%2Fapp%2Fapp.component.html

I am getting following error:

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

same for falseValue. How can I resolve this?

Solution

Primeng v9 doesn’t have trueValue and falseValue.

In v9, you need to bind a boolean to p-checkbox like this:

<p-checkbox
 name="product"
 binary="true"
 [ngModel]="cityData.status[product.id]===1"
 (onChange)="toggleVisibility($event, cityData, product)"
 #checkbox
 ></p-checkbox>

Here, you are adding a 1-way binding to the p-checkbox. This binds a boolean value with checkbox:cityData.status[product.id]===<your-expected-value>

Answered By – Pankaj Sati

Answer Checked By – Timothy Miller (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published