Angular Material Dialog复选框始终返回false问题咨询

我来帮你排查这个问题，大概率是表单绑定或者对话框关闭时数据传递的环节出了问题，咱们一步步来解决：

第一步：确认对话框内的表单绑定是否正确 #

首先得保证对话框组件里的复选框和entryIsKeynote这个FormControl正确关联：

1. 响应式表单场景（推荐） #

如果用的是响应式表单，先检查对话框组件的FormGroup定义：

// 对话框组件的.ts文件
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

// ...
entryForm: FormGroup;

constructor(private fb: FormBuilder, public dialogRef: MatDialogRef<YourDialogComponent>) {
  this.entryForm = this.fb.group({
    entryTitle: ['', Validators.required],
    entryContents: [''],
    entryIsKeynote: [false] // 初始值设为布尔类型的false
  });
}

然后模板里的复选框要通过formControlName绑定到这个控件：

<!-- 对话框组件的.html模板 -->
<mat-checkbox formControlName="entryIsKeynote">标记为主题演讲</mat-checkbox>

2. 模板驱动表单场景 #

如果用的是模板驱动，确保ngModel和name属性正确设置：

// 对话框组件的.ts文件
entryIsKeynote = false;

<mat-checkbox [(ngModel)]="entryIsKeynote" name="entryIsKeynote">标记为主题演讲</mat-checkbox>

第二步：确保关闭对话框时传递正确的表单值 #

对话框关闭时，要传递整个表单的value（或者正确的单个值），而不是控件对象本身：

// 对话框组件中点击确认按钮的方法
onConfirm() {
  // 响应式表单的情况
  if (this.entryForm.valid) {
    this.dialogRef.close(this.entryForm.value); // 传递表单的完整value对象
  }

  // 模板驱动表单的情况
  // this.dialogRef.close({
  //   entryTitle: this.entryTitle,
  //   entryContents: this.entryContents,
  //   entryIsKeynote: this.entryIsKeynote
  // });
}

第三步：在AppComponent中正确读取值 #

现在回到app.component的订阅逻辑，直接从返回的data对象中读取entryIsKeynote即可，不需要加.checked（那是原生DOM复选框的属性，Angular表单已经帮你处理成布尔值了）：

dialogRef.afterClosed().subscribe(data => {
  // 先判断用户是否点击了取消（此时data为null）
  if (data) {
    this.newEntryAdded(new Entry(data.entryTitle, data.entryContents, data.entryIsKeynote));
  }
});

额外排查点 #

如果还是有问题，可以做以下检查：

• 在对话框组件中订阅控件的value变化，确认值是否正确更新：

  this.entryForm.get('entryIsKeynote').valueChanges.subscribe(val => {
    console.log('复选框值变化：', val); // 看看这里打印的是不是正确的true/false
  });
  

• 检查你的Entry类构造函数，第三个参数是否接受布尔类型，有没有类型不匹配导致的隐式转换问题。

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