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

时间:2019-06-16 17:56:16

标签: angular data-binding angular-ngmodel angular-forms ngmodel

打开表单时,我希望某些字段预先填充值。这就是为什么我在下面使用[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); 
}

也可以,但是我需要使用一些已经定义的值打开表单

谢谢

1 个答案:

答案 0 :(得分:2)

为了设置复选框的初始状态,请对[ngModel]使用单向数据绑定:

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