How to check/uncheck a checkbox programmatically in Angular 8?

Question

How can I check/uncheck a checkbox programmatically.

<input type="checkbox" formControlName="checkedGender" [checked]="checkedGender" (change)="checkedGender = !checkedGender" disabled />

I have this below angular code but its not able to check/uncheck.

Angular line of code for checking the checkbox:

this.formGroup.controls['checkedGender'].setValue(true);

Similarly Angular line of code for unchecking the checkbox

this.formGroup.controls['checkedGender'].setValue(false);

but none of those are showing any effect on checkbox, am I doing something wrong?

you should remove [checked] this is already done by the angular forms api. Otherwise you change the value with setValue(false) to uncheck it, but in your code you say (change)="checkedGender = !checkedGender". SetValue triggers a change as well, so you are redundant. Just keep formControlName and work with reactive forms in all means, or use the template and remove the formControlName — SirOneOfMany
– SirOneOfMany, Commented Apr 25, 2022 at 10:33

SirOneOfMany · Accepted Answer · 2022-04-25 10:38:36Z

1

Angular forms api should handle the change for you. So it should not be necessary to assign something to [checked] or (change) because reactive forms are doing this.

So just write

<input type="checkbox" formControlName="checkedGender" disabled>

The state of this checkbox will be set by the forms api

answered Apr 25, 2022 at 10:38

SirOneOfMany

1,1026 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to check/uncheck a checkbox programmatically in Angular 8?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related