Angular Material模态框点击标签切换按钮意外关闭问题求助

嘿，我帮你定位到问题啦！你的对话框在点击Next按钮时意外关闭，核心原因和表单内按钮的默认类型有关，还有个小的赋值错误也得修正，一起来看看：

1. 核心问题：未指定按钮类型导致触发表单提交 #

在<form>标签内，所有<button>元素如果没有显式声明type属性，默认会被识别为type="submit"。你的Next按钮刚好在form里面，点击它的时候，除了执行matgroup.selectedIndex = 1切换Tab，还会触发form绑定的ngSubmit事件，调用你的submit()方法——而这个方法里直接执行了this.dialogRef.close(this.form.value)，自然就把对话框关掉了。

2. 修复步骤 #

步骤一：给Next按钮添加type="button"

修改HTML里的Next按钮代码，明确指定按钮类型为button，这样点击时就不会触发表单提交：

<button mat-raised-button color="primary" type="button" (click)='matgroup.selectedIndex = 1'>Next</button>

步骤二：修正TypeScript里的赋值错误

你在ngOnInit里写的this.stores==['arun','reddy']用了比较运算符==，这会导致stores变量没有被正确赋值，下拉选单里会没有选项。改成赋值运算符=就好：

ngOnInit() {
  this.stores = ['arun','reddy']; // 将==替换为=
  this.form = this.formBuilder.group({
    devicename: '',
    devicedesc: '',
    store: ['']
  });
  this.form.patchValue({
    store: this.stores ? this.stores[0] : 'None'
  });
}

验证效果 #

做完这两处修改后，点击Next按钮就只会切换到Location标签页，对话框不会再意外关闭，同时下拉选单也能正常显示选项啦～

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