Restarting of the forms when users are switching between the mat tabs

Question

Am building angular application and i want to use mat-tabs. But every time that am switching between tabs, the inputs are becoming empty if you switch tabs.

Html

<mat-tab-group disableRipple [selectedIndex]="selected.value">
      <mat-tab>
        <ng-template mat-tab-label>
          mat tab label
        </ng-template>
        <ng-template matTabContent class="col-sm-12 col-md-12 col-lg-12 ">
           <mat-form-field class="col-sm-12 col-md-6 col-lg-6" appearance="outline">
                <mat-label class="label-main-title">MRN #</mat-label>
                <input matInput formControlName="mrn">
              </mat-form-field>
              <mat-form-field class="col-sm-12 col-md-6 col-lg-6" appearance="outline">
                <mat-label>Visit #</mat-label>
                <input matInput formControlName="visitNr">
              </mat-form-field>
        </ng-template>
      </mat-tab>
</mat-tab-group>

Answer 1

Remove the label from ng template, place it in mat-tab tag.

Something like this:

<mat-tab label="">