1

I'm currently working on a forms with several tabs.

I want to prevent user from switching to another tab if the form is dirty.

Is there such an event like beforeTabChange?

Bishan
  • 15,211
  • 52
  • 164
  • 258
nhoyti
  • 1,615
  • 2
  • 26
  • 42
  • 1
    Does this answer your question? [Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty](https://stackoverflow.com/questions/56607394/angular-material-tab-prevent-tab-change-of-mat-tab-group-if-the-form-in-curren) – Bishan Apr 28 '21 at 03:05

1 Answers1

0

The only @Output() events you can bind to according to the Material Docs are

@Output() animationDone: EventEmitter<void>
Event emitted when the body animation has completed

@Output() focusChange: EventEmitter<MatTabChangeEvent>
Event emitted when focus has changed within a tab group.

@Output() selectedIndexChange: EventEmitter<number>
Output to enable support for two-way binding on [(selectedIndex)]

@Output() selectedTabChange: EventEmitter<MatTabChangeEvent>   
Event emitted when the tab selection has changed.

so you could technically listen to the events on the tab group. but that seems overly complicated.

It might be better to use the disabled attribute on the tab to bind to the conditions you wish to use i.e.

<mat-tab-group mat-align-tabs="start">
  <mat-tab #first label="First" [disabled]="!first.isActive && form.invalid">Content 1</mat-tab>
  <mat-tab #second label="Second" [disabled]="INSERT CONDITION">Content 2</mat-tab>
  <mat-tab #second label="Third" [disabled]="INSERT CONDITION">Content 3</mat-tab>
</mat-tab-group>

you can then bind your template to a value that is maintained in the class. or use template references to disable a tab if it isn't the currently active one and your form is invalid. !first.isActive && form.invalid

Edward
  • 1,076
  • 1
  • 12
  • 24