Angular模板驱动表单不使用双向绑定实现checkbox默认勾选的方法

原因说明 #

在Angular模板驱动表单中，只要为控件添加了ngModel指令，控件的状态就会完全由Angular的表单模型管控，原生HTML的checked属性优先级低于表单模型的初始值，因此你前两种直接设置原生checked的写法会被Angular默认的初始值false覆盖，无法生效。

不用双向绑定的实现方案 #

你可以使用单向ngModel绑定实现需求，不需要双向绑定，直接给[ngModel]传入初始布尔值即可：

<!-- app.component.html 写法示例 -->
<form #form="ngForm" (ngSubmit)="submit(form.value)">
  <!-- 直接传入字面量true，不需要绑定组件变量，默认勾选 -->
  <input #cb1 type="checkbox" name="cb1" [ngModel]="true" />
  <input #cb2 type="checkbox" name="cb2" [ngModel]="true" />
  <button type="submit">Submit</button>
</form>

这种写法不需要在组件中声明额外变量，也不需要双向绑定，初始化时就会默认勾选复选框，提交表单时也能正常获取到对应字段的选中状态。

如果有动态设置初始值的需求，也可以绑定组件中的布尔变量，和双向绑定的区别仅在于后续控件值变更不会自动同步回组件变量，如果你不需要监听值变化，完全可以用这种写法：

// app.component.ts
export class AppComponent {
  defaultChecked = true;
  submit(x: any) {
    console.log(x);
  }
}

<input type="checkbox" name="cb" [ngModel]="defaultChecked" />

内容的提问来源于stack exchange，提问作者cpper