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?

Answer 1

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.