如何在 Angular 中使用 ngModel 预填表单

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

为了设置复选框的初始状态，使用 one-way 数据绑定 [ngModel]:

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

如何在 Angular 中使用 ngModel 预填表单

How to pre-fill form with ngModel in Angular

data-binding

angular-ngmodel

ngmodel

angular

angular-forms