Repository navigation
Set default state of a checkbox #405
Description
This seems like a really stupid question but I just can't find the answer anywhere.
I want to set the initial state of a checkbox based the initial state of the data object.
Eg the data object may have an attribute "isAvailable" so I want to set the checkbox to match the value of isAvailable.
The problem I am having is that to set the initial state of a check box to checked you add the "checked" attribute to the form control.
(This seems silly as it would seem better to have used checked="true" as you can read the value of the checkbox by reading its "checked" value. Anyway that's not the way it is.)
So it looks like I would have to do an NgIf.
I'm sure there must be an easier way but I just can't find it.
Activity
PatrickJS commentedon Mar 11, 2016
have you tried
<input type="checkbox" [attr.checked]="isAvailable">chriscurnow commentedon Mar 12, 2016
I hadn't tried it but I tried it just then and it didn't work:(
It's not too hard to do it with ngIf and I could even create a component to do it. It just seemed like there should be an easier way.
PatrickJS commentedon Mar 12, 2016
here's a plnkr where I have it working
http://plnkr.co/edit/Hxy5Jz?p=preview
chriscurnow commentedon Mar 13, 2016
Well there you go. I must have been doing something wrong. I'll try again.
Thanks for taking the time to set up the demo. I really appreciate it.
julioaze commentedon Jan 13, 2017
Hello, how could I make sure all checked checkboxes (isAvailable = true) are cleared at the click of the button?
I tried with your example, but isAvailable only has the state = true if you use (change) and in this case, when checking any checkbox, all others with [checked] = "isAvailable" are checked.
I need to check some random checkboxes and then uncheck the button click.
Any help will be appreciated
NabinKhatiwada commentedon Mar 1, 2017
julioaze , u need to create different variable for each check box. It will work . Example;
.ts:
private isAppUser = true;
private isUser = true;
html:
<input type="checkbox" [checked]="isAppUser" value="isAppUser" (change)="isAppUser = $event.target.checked" formControlName="appUserFlag">
<input type="checkbox" [checked]="isUser" value="isUser" (change)="isUser= $event.target.checked" formControlName="aaa">
Seanmclem commentedon May 8, 2018
In Angular 2+, If you're using template forms and/or ngModel then you can set default checkbox values right in the model you declare. When declaring the boolean values do something like this:
when you load up the form with undefined values -they will default to what you set in the model
sksandeep087 commentedon May 30, 2018
Hello, Sir
Can you Help me , I want to use multiple checkBox byDefault selected.
saimzishan commentedon Sep 17, 2018
<ng-container *ngFor="let opt of option_set_ids">
<checkbox [checked]='true' [value]="opt.id">{{opt.value}}