How do I set a default value on a checkbox in Angular?

Question

I have the following code:

<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]= 
{standalone:true} (change)="recovery(i.checkt,i.TherapeuticArea)"> 
{{i.TherapeuticArea}}

The problem I am facing is that with standalone:true every checkbox is checked by default and when standalone is false, the checkbox isn't working. Is there any way of setting the checkbox value to unchecked while having full functionality for the user?

Consider angular.io/api/forms/FormControl

Florian
– Florian

2018-11-30 09:48:45 +00:00
Commented Nov 30, 2018 at 9:48 — Florian
– Florian, Commented Nov 30, 2018 at 9:48

marc_s · Accepted Answer · 2019-04-06 14:29:05Z

3

You need to set the checked attribute on the input like the following:

<input type="checkbox" [(ngModel)]="i.checkt" [ngModelOptions]={standalone:true} 
(change)="recovery(i.checkt,i.TherapeuticArea)" [checked]="i.checkt">

But I would recommend @Florian's comment of using a FormControl to manage inputs from the UI. It will save you a lot of time and makes it easier to maintain in my opinion.

edited Apr 6, 2019 at 14:29

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 30, 2018 at 10:35

Jamie Rees

8,1832 gold badges51 silver badges84 bronze badges

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

Collectives™ on Stack Overflow

How do I set a default value on a checkbox in Angular?

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