Angular Material Tab:如果当前选项卡中的表单脏了，则防止 mat-tab-group 的选项卡更改 [英] Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty

问题描述

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

I was trying to prevent tab change of mat-tab, if the form in currently active tab is dirty.

但是我找不到拦截标签更改事件的方法.

But I couldn't find a way to intercept the tab change event.

<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 事件，我们也无法阻止选项卡更改.我们只能在选项卡更改后以编程方式切换选项卡.

Even though there is a selectedTabChange event, we can't prevent tab change. we can only switch tab programatically after tab change.

我有一个技巧可以使它成为可能.如果有人遇到同样的情况，请在此处发布以提供帮助.

I have got a hack to make it possible. Just posting here to help if someone encounters the same.

推荐答案

该解决方案只是一种变通方法，并且有其缺陷.下面会提到.

This solution is just a work around and has its flaws. It is mentioned below.

步骤:

在模板中:

1. 禁用 mat-tab-group 的所有选项卡

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

Provide a click event handler on mat-tab-group. Also set the selectedIndex property using a variable from the component class.

在组件类中:

1. 声明变量selectedTabIndex
selectedTabIndex = 0;

创建一个获取标签索引的方法，提供标签标签.

Create a method to get the tab Index , provided the tab label.

 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
  }

 }

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

We can get the tab-label text from a property of the click event

`clickEventName.toElement.innerText`

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

Create the method for handling the click event on 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 来访问它们并检查任何表单是否脏.

In my case each tab content was in separate components. So I used @ViewChild to access them and check whether any of the form is dirty or not.

缺陷:

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

1. Since this method uses the text of clicked element for switching tabs, there is a chance that one of your tab may contain some element with text content same as the heading of other tabs.

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

So it may trigger a tab change. You can look for other properties in click event to prevent this scenario if possible. I used following code in tabClick() method's beginning

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

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

You may need to override the css of disabled state of mat-tab to make it look natural

模板:

<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>

这篇关于Angular Material Tab:如果当前选项卡中的表单脏了，则防止 mat-tab-group 的选项卡更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！