Angular Material 7 mat-checkbox提交时替换true/false为Y/N问题求助

看起来你遇到的问题主要是mat-checkbox的ngModel绑定逻辑错误，以及提交时没有正确替换表单值里的布尔值。咱们一步步来修正：

问题分析 #

1. mat-checkbox的ngModel默认绑定的是布尔值（true/false），但你直接绑定了'Y'/'N'字符串，这会导致复选框的状态和数据不匹配，表单提交时拿到的也不是正确的布尔值。
2. 你在组件里定义了value变量，但没有把它替换到form.value中，所以提交给后端的还是原来的布尔值（或者错误的字符串）。

修正方案 #

第一步：修正HTML中的mat-checkbox绑定

把mat-checkbox的ngModel绑定为布尔值，显示的文本可以用Y/N来展示：

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)" class="form-horizontal row-border">
  <input matInput type="text" class="form-control form-input" name="userId" [ngModel]="selectedRow?.userId" [readonly]="selectedRow?.userId" id="userId" required>
  <input matInput type="text" class="form-control form-input" name="userName" [ngModel]="selectedRow?.userName" id="userName" required>
  <!-- 修正：ngModel绑定布尔值，显示文本用Y/N -->
  <mat-checkbox name="blocked" [ngModel]="selectedRow?.blocked === 'true'" id="blocked">
    {{selectedRow?.blocked === 'true' ? 'Y' : 'N'}}
  </mat-checkbox>
  <button type="submit" mat-flat-button color="primary">Submit</button>
</form>

注：如果你的selectedRow.blocked本身就是布尔值（true/false），那直接写[ngModel]="selectedRow?.blocked"即可，显示文本改成{{selectedRow?.blocked ? 'Y' : 'N'}}。

第二步：提交时转换布尔值为'Y'/'N'

在onSubmit方法中，把表单值里的blocked字段替换成Y或N，再提交给后端：

onSubmit(form: NgForm ){
  // 复制表单值，避免直接修改原对象
  const data = { ...form.value };
  // 将布尔值转换为Y/N
  data.blocked = data.blocked ? 'Y' : 'N';
  // 现在可以把data提交到后端了
  console.log('提交的数据:', data);
  // 比如调用你的API：this.http.post('/api/user', data)
}

为什么原来的代码没生效？ #

• 你之前的mat-checkbox把ngModel绑定成了'Y'/'N'，但mat-checkbox无法识别字符串作为选中状态，导致复选框的选中状态和数据脱节，提交时form.value.blocked可能不是你预期的结果。
• 组件里的let value = ...只是定义了一个变量，但没有把它赋值到form.value里，所以最终提交的还是原始的布尔值（或错误的字符串）。

这样修改后，复选框的状态会正确对应selectedRow的数据，提交时也能把布尔值转换成Y/N发送给后端啦！

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