Looking to achieve Two-way data binding of Checkbox in Angular Reactive forms. After checking the checkbox, I am updating the 'isdateChkd' variable and storing it in the state. Despite the variable being set to TRUE, the checkbox does not get auto-checked upon page load.
Here are the snippets from both the HTML and ts files:
HTML File
<form [formGroup]="form">
<div class="abc" formControlName="inputDate">
<div class="xyz">
<p-calendar formControlName="inputDate"
[(ngModel)]="inputDateValue"
class="abc"/>
<input type="checkbox" id="checkbox-1" class="abc" name="dateChk"
name="dateIsChecked" [(ngModel)]="isdateChkd" (change)="chkFunction($event.target.value)" />
</div>
</div>
</form>
Component.ts file
public isdateChkd: boolean = false;
ngOnInit() {
....Other service calls
// Retrieve value for isdateChkd
this.store.select(getValues).takeUntil(this.ngUnsubscribe).subscribe((data) => {
this.isdateChkd = data.defaultUpdate // boolean value retrieved
});
}
chkFunction(value) {
this.isdateChkd = value; // Update 'isdateChkd' on checkbox check
this.store.dispatch(new updateCheckboxCheckedService(value)); // Dispatch updated value to the store
}
Your assistance is greatly appreciated...