Angular mat-select多选绑定的form control执行reset无法置空如何解决

问题根因 #

• 初始化表单时category字段的默认值为空字符串''，但多选模式下mat-select的绑定值为数组类型，类型不匹配导致reset()方法执行后值的更新不符合预期
• 重置按钮type="reset"会触发浏览器原生表单重置行为，和Angular响应式表单的重置逻辑存在冲突，导致实际值未被正确更新

修复步骤 #

1. 修正表单初始化的默认值，匹配多选场景的数组类型预期：

this.form = this.formBuilder.group({
  category: [null], // 若需要初始值为空数组可替换为[]
});

2. 修改重置方法，明确指定重置值，同时阻止默认事件冲突：

reset(e: Event){
    e.preventDefault();
    this.form.reset({
      category: null // 明确指定重置为目标值null
    });
    return false;
}

3. 调整重置按钮配置，传入事件对象，也可以直接将按钮类型改为button彻底避免原生重置行为干扰：

<button type="button" mat-raised-button (click)="reset($event)" 
        style="margin-right: 5px;">
  Reset
</button>

额外注意 #

如果你自定义的全选方法toggleAllCategories、单选切换方法toggleOnCategory里有额外存储选中状态的临时变量，重置时也需要同步清空，避免视图和数据状态不一致。

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