title: Modal dialog is closing unexpectedly when i clicked a button to navigate to another tab in angular material 2
body: <p>I am trying to use tabs inside modal dialog where if i clicked on the next button it should navigate to another tab.But instead of navigating,the dialog closed unexpectedly.Could someone help me where actually i went wrong.</p>
  
  <p><strong>Html</strong></p>
  
  <pre><code>&lt;div&gt;
      &lt;h4 class="dialog-headline"&gt;Configure Device
          &lt;span&gt;
         &lt;mat-icon class="pull-right close-icon" (click)="onCloseDialog()"&gt;close&lt;/mat-icon&gt;
      &lt;/span&gt;&lt;/h4&gt;
  
  &lt;/div&gt;
  &lt;form [formGroup]="form" (ngSubmit)="submit()"&gt;
      &lt;mat-tab-group #matgroup&gt;
          &lt;mat-tab label="Details"&gt;
              &lt;div class="tab-content"&gt;
                  &lt;div class="content-container tab-content-height"&gt;
                      &lt;mat-form-field&gt;
                          &lt;input matInput formControlName="devicename" placeholder="Enter Device name"&gt;
                      &lt;/mat-form-field&gt;
  
                      &lt;mat-form-field&gt;
                          &lt;input matInput formControlName="devicedesc" placeholder="Enter Device Description"&gt;
                      &lt;/mat-form-field&gt;
                      &lt;mat-dialog-actions class="pull-right"&gt;
                          &lt;button mat-raised-button color="primary" (click)='matgroup.selectedIndex = 1'&gt;Next&lt;/button&gt;
                      &lt;/mat-dialog-actions&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/mat-tab&gt;
          &lt;mat-tab label="Location"&gt;
              &lt;div class="tab-content" style="height: 140px"&gt;
  
                  &lt;div class="content-container"&gt;
                      &lt;mat-form-field&gt;
                          &lt;mat-select placeholder="Select the store" formControlName="store"&gt;
                              &lt;mat-option value="option"
                              *ngFor="let store of this.stores" [value]="store.name"&gt;{{store.name}}&lt;/mat-option&gt;
                          &lt;/mat-select&gt;
                      &lt;/mat-form-field&gt;
                  &lt;/div&gt;
  
                  &lt;mat-dialog-actions&gt;
                      &lt;button mat-raised-button color="primary"
                              type="submit"
                              (click)="onCloseDialog()"
                              style="margin-left: 20px;"&gt;Save
                      &lt;/button&gt;
                      &lt;button mat-raised-button color="primary" (click)='matgroup.selectedIndex = 0'&gt;Back&lt;/button&gt;
                  &lt;/mat-dialog-actions&gt;
              &lt;/div&gt;
          &lt;/mat-tab&gt;
      &lt;/mat-tab-group&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>TypeScript</strong></p>
  
  <pre><code>import {Component, Inject, OnInit} from '@angular/core';
  import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material';
  
      import {FormBuilder, FormControl, FormGroup} from '@angular/forms';
  
      @Component({
        templateUrl:'file-name-dialog.component.html',
        styleUrls:['file-name-dialog.component.css'
        ]
  
      })
      export class FileNameDialogComponent {
  
          form: FormGroup;
          stores;
  
          constructor(
              private formBuilder: FormBuilder,
              private dialogRef: MatDialogRef&lt;FileNameDialogComponent&gt;,
  
          ) {}
  
          ngOnInit() {
  
              this.stores==['arun','reddy'];
              this.form = this.formBuilder.group({
                  devicename: '',
                  devicedesc: '',
                  store: ['']
              });
              this.form.patchValue({
                  store: this.stores ? this.stores[0] : 'None'
              });
          }
          onCloseDialog() {
              this.dialogRef.close();
          }
          submit() {
            this.dialogRef.close(this.form.value);
          }
      }
  </code></pre>
  
  <p>Here is the stackblitz link</p>
  
  <p><a href="https://stackblitz.com/edit/matdialog-demo-reactiveforms?file=app/file-name-dialog.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/matdialog-demo-reactiveforms?file=app/file-name-dialog.component.ts</a></p>