angular - 如何在 Angular 中使用 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);
}
这也很好用,但我需要用一些已经定义的值打开表单
谢谢
解决方案
为了设置复选框的初始状态,使用单向数据绑定[ngModel]
:
[ngModel]="userFilter[u.id]"
推荐阅读
- javascript - Next.js Router.push 没有设置任何 req.headers
- azure - CI/CD 时无法在 Azure 上复制文件和文件夹
- c++ - 为单个函数一次声明多个变量的最佳方法是什么?
- html - 在不同大小的网格中移动按钮
- react-native - 修改index.js后黑屏
- c# - MVC 5 AJAX 代码未访问控制器类操作服务器端
- python - Google Cloud - 收到无效的 JSON 负载。'config' 中的未知名称“编码”:原始字段不重复,无法启动列表
- c# - 如何通过在自托管应用程序中使用 HTTPListener 托管的 HTML 页面下载文件
- regex - 使用查询参数和 URL 中的 ~ 进行 301 重定向
- html - 使用突出显示菜单中的文本
- 在 CSS 中