CODEWITHSUNDEEP
javascriptangulartypescript
user11364823
user11364823

Reputation:

Angular Reactive form: Unable to bind checkbox checked property on page load

In Angular Reactive forms i want Two-way data binding of Checkbox, after checking it i am dispatching check variable it to the store and after page load i am getting the new updated value also. But that checkbox isdateChkd variable even though its coming TRUE checkbox is not getting auto checked on page load.

Below are both 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

// Call to get isdateChkd value

this.store.select(getValues).takeUntil(this.ngUnsubscribe).subscribe((data) => {

this.isdateChkd = data.defaultUpdate // this value holds boolean to be used


});

}

chkFunction(valule) {
 this.isdateChkd = value; // i get update when checkbox is checked

this.store.dispatch(new updateCheckboxCheckedService(value)); // after its checked dispatching it to the store
}

Thanks in advance for help...

Upvotes: 0

Views: 1273

Answers (1)

Ganesh
Ganesh

Reputation: 6016

You can use checked attribute along with NgModel.

It's working here with checked along with the value isdateChkd. You can also check here in this stackBlitz

Please try to make changes like below code

    ...
    <input type="checkbox" id="checkbox-1" class="abc" name="dateIsChecked" 
         [(ngModel)]="isdateChkd" (change)="chkFunction($event)" checked="isdateChkd" />
    ...

Happy Coding.. :)

Upvotes: 1

Related Questions