How to pre-fill form with ngModel in Angular

Question

When I open the form I want some fields to be pre-filled with values. That's why I use [checked]="userFilter[u.id]" below.

However, as soon I as include the ngModel directive into the element, the form does not show the values pre-filled.

For example

<!-- works and checks/unchecks the box according to userFilter[u.id] when first opening the form -->
<input type="checkbox" id="{{u.id}}" name="{{u.name}}" [checked]="userFilter[u.id]">


<!-- does not check or uncheck the box according to userFilter[u.id] when first opening the form -->
<input type="checkbox" id="{{u.id}}" name="{{u.name}}" ngModel [checked]="userFilter[u.id]">

I want to use ngModel because when I submit the form I want to access all fields and values as follows:

onSubmit(f: NgForm) {
   console.log('form values', f.value); 
}

which works fine as well, but I need to open the form with some values already defined

thanks

Answer 1

In order to set the initial state of the checkbox, use one-way data binding with [ngModel]:

[ngModel]="userFilter[u.id]"