Как предварительно заполнить форму с помощью ngModel в Angular

Question

Когда я открываю форму, я хочу, чтобы некоторые поля были предварительно заполнены значениями. Вот почему я использую [checked]="userFilter[u.id]" ниже.

Однако, как только я включу директиву ngModel в элемент, форма не показывает предварительно заполненные значения.

Например

<!-- 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]">

Я хочу использовать ngModel, потому что при отправке формы я хочу получить доступ ко всем полям и значениям следующим образом:

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

, который также хорошо работает, но мне нужно открыть форму с уже определенными значениями

спасибо

Answer 1

Чтобы установить начальное состояние флажка, используйте одностороннюю привязку данных с [ngModel]:

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