Angular Material Tab : 如果当前选项卡中的表单脏了，则防止 mat-tab-group 的选项卡更改

Posted 2023-03-13

【中文标题】Angular Material Tab : 如果当前选项卡中的表单脏了，则防止 mat-tab-group 的选项卡更改

【英文标题】：Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty

【发布时间】：2019-10-29 15:15:17

【问题描述】：

我试图阻止mat-tab 的选项卡更改，如果当前活动选项卡中的表单是脏的。

但我找不到拦截选项卡更改事件的方法。

<mat-tab-group>

  <mat-tab label="Tab 0" >

    // Tab 0 Content

  </mat-tab>

  <mat-tab label="Tab 1"  >

    // Tab 1 Content

  </mat-tab>

  <mat-tab label="Tab 2" >

    // Tab 2 Content

  </mat-tab>

</mat-tab-group>

即使有selectedTabChange 事件，我们也无法阻止标签更改。我们只能在选项卡更改后以编程方式切换选项卡。

【参考方案1】：

此解决方案只是一种变通方法，并且存在缺陷。下面会提到。

步骤：

在模板中：

禁用 mat-tab-group 的所有选项卡 <mat-tab label="Tab 0" disabled>

在 mat-tab-group 上提供单击事件处理程序。 还可以使用组件类中的变量设置selectedIndex 属性。

<mat-tab-group (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

在组件类中：

声明变量selectedTabIndexselectedTabIndex = 0;

创建一个方法来获取标签索引，提供标签标签。

 getTabIndex(tabName: string): number 

 switch (tabName) 
   case 'Tab 0': return 0;
   case 'Tab 1': return 1;
   case 'Tab 2': return 2;
   default: return -1; // return -1 if clicked text is not a tab label text
  

 

我们可以从点击事件的属性中获取标签标签文本

`clickEventName.toElement.innerText`

在mat-tab-group上创建处理点击事件的方法。

 tabClick(clickEvent: any) 

 // Get the index of clicked tab using the above function
 const clickedTabIndex = this.getTabIndex(clickEvent.toElement.innerText);

 // if click was not on a tab label, do nothing
 if (clickedTabIndex === -1) 
   return;
 

 // if current tab is same as clicked tab, no need to change. 
 //Otherwise check whether editing is going on and decide

 if (!(this.selectedTabIndex === clickedTabIndex)) 

   if ( /*logic for form dirty check*/ ) 

     // if form is dirty, show a warning modal and don't change tab.
   
   else 

     // if form is not dirty, change the tab
     this.selectedTabIndex = clickedTabIndex;
   
 

在我的情况下，每个选项卡内容都在单独的组件中。所以我使用@ViewChild 来访问它们并检查任何表单是否脏。

缺陷：

由于此方法使用单击元素的文本来切换选项卡，因此您的一个选项卡可能包含一些文本内容相同的元素 其他标签的标题。

因此它可能会触发标签更改。如果可能，您可以在单击事件中查找其他属性以防止出现这种情况。 我在tabClick() 方法的开头使用了以下代码

 if (!((clickEvent.toElement.className).toString().includes('mat-tab-label'))) 
  return;
  

您可能需要覆盖mat-tab 的disabled 的css 状态以使其看起来自然

模板：

<mat-tab-group  (click)="tabClick($event)" [selectedIndex]="selectedTabIndex">

  <mat-tab label="Tab 0" disabled>

    // Tab 0 Content

  </mat-tab>

  <mat-tab label="Tab 1"  disabled>

    // Tab 1 Content

  </mat-tab>

  <mat-tab label="Tab 2"  disabled>

    // Tab 2 Content

  </mat-tab>

</mat-tab-group>

【讨论】：

这将非常有用..如果您可以添加上述解决方案的stackblitz链接。

这在 Chrome 中运行良好，但在 Firefox 中出现 ERROR TypeError: clickEvent.toElement is undefined。有人可以建议如何解决这个问题吗？ // 这行导致问题 const clickedTabIndex = this.getTabIndex(clickEvent.toElement.innerText);

不行！！！！！！！