如何让Angular Material的mat-checkbox表单初始化时返回0值

问题原因 #

你当前的写法存在两个冲突问题：

• 同时为mat-checkbox绑定了响应式表单的formControlName和模板属性[checked]，Angular响应式表单的状态优先级更高，[checked]绑定不会生效
• 初始化confirmcheck对应的FormControl时传入了空字符串作为初始值，未手动操作的情况下控件值默认就是undefined，所以读取时拿不到预期的0值

修复方案 #

第一步：调整模板代码 #

移除模板中的[checked]绑定，将表单控件状态完全交给响应式FormControl管理

<mat-card-content [formGroup]="formGroupContent">
    <section>
             <mat-checkbox formControlName="confirmcheck">admin confirm 
             </mat-checkbox>
    </section>
 </mat-card-content>

第二步：调整TS代码 #

初始化FormControl时传入默认值false，取值时转为数字即可拿到符合要求的0/1值

ngOnInit(): void {
        this.formGroupContent = this.formBuilder.group({
        // 初始化默认值为未勾选状态（false）
        confirmcheck:new FormControl(false)
        });

// 读取时转为数字，false会自动转成0，true会转成1，符合存入数据库的要求
const chk = Number(this.formGroupContent.value.confirmcheck);
}

如果希望FormControl直接存储数字类型的0/1，也可以通过valueChanges监听做自动转换：

ngOnInit(): void {
  this.formGroupContent = this.formBuilder.group({
    confirmcheck:new FormControl(0)
  });
  // 监听控件值变化，自动将勾选产生的布尔值转为数字存储
  this.formGroupContent.get('confirmcheck').valueChanges.subscribe(val => {
    this.formGroupContent.get('confirmcheck').setValue(Number(val), {emitEvent: false})
  })
}

内容的提问来源于stack exchange，提问作者mahdi.gh