Reputation: 2810
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
Upvotes: 0
Views: 2669
Reputation: 73741
In order to set the initial state of the checkbox, use one-way data binding with [ngModel]
:
[ngModel]="userFilter[u.id]"
Upvotes: 2