how to uncheck/check a primeng checkbox manually

Question

html

<p-checkbox name="showLinkedRisksOnly" id="showLinkedRisksOnlyChkBx" 
   label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event)"
   [ngModel]="showLinkedRisksOnly" ></p-checkbox>

typescript

showOnlyLinkedRisks($event){
  if(condition){
    this.showLinkedRisksOnly = !this.showLinkedRisksOnly;
  }
}

I am trying to change the state of checkbox back to before it was checked/unchecked based on condition. But for some reason the checkbox and model get out of sync when I do change the value of this.showLinkedRisksOnly. Is it possible to achive

Solution 1

First, binding onChange event instead of click event. Then add checkbox instance to event

<p-checkbox name="showLinkedRisksOnly" #something id="showLinkedRisksOnlyChkBx" label="Show Only Linked Risks" binary="true" (click)="showOnlyLinkedRisks($event, something)" [ngModel]="showLinkedRisksOnly"></p-checkbox>

And in typescript

showOnlyLinkedRisks(event, control) {
    if (false) {
      control.checked = false;
    } else { this.showLinkedRisksOnly = event.checked; }
}

Sorry for my bad english!

Solution 2

Method 1 - Handle ngModelChange + trigger change detection

To make the checkbox readonly, you can handle the ngModelChange event:

<p-checkbox ...
  [ngModel]="showLinkedRisksOnly" 
  (ngModelChange)="showOnlyLinkedRisks($event)">
</p-checkbox>

and follow these steps in the event handler:

1. Set the new value
2. If the checkbox is readonly
   3. Trigger change detection
   4. Put the original value back

constructor(private cd: ChangeDetectorRef) { }

showOnlyLinkedRisks(value) {
  this.showLinkedRisksOnly = value;    // Set the new value
  if (!this.condition) {               // If the checkbox is readonly
    this.cd.detectChanges();           // Trigger change detection
    this.showLinkedRisksOnly = !value; // Put the original value back
  }
}

See this stackblitz for a demo.

---

Method 2 - Two-way binding + disable control

An alternative method is to use two-way binding, and to disable the control to prevent changes:

<p-checkbox ...
  [(ngModel)]="showLinkedRisksOnly" 
  [disabled]="!condition">
</p-checkbox>

See this stackblitz for a demo.

Comments

[Nino Filiu]

Your code looks fine, I'm pretty sure the error can be found elsewhere in the code

[SeleM]

Could you elaborate more? ur code seems working.

[josh_boaz]

i am changing the value of model, but its not updating in UI

[SeleM]

Try [(ngModel)] instead of [ngModel] .

[SeleM]

Provide a stackblitz

[Rafael Lucini]

Use banana inbox instead. [(ngModel)]

[josh_boaz]

i want to control the value of ngmodel inside my component, don't want it be controlled by ui interaction