角度材质 - 折叠步进器的非活动步骤

我有@ Angular / Material的Stepper，看起来很棒 . 但是，我看到很多例子只打开了当前步骤 . 我想要这个功能 . 应关闭所有非活动步骤 .

[编辑]：刚添加在HTML和TS文件中 .

组件HTML文件

<img width="350px" align="middle" mat-card-image src="../assets/Icon_Rev8.png" alt="Logo">
<mat-card-content>
   <mat-tab-group mat-stretch-tabs [selectedIndex]="0" dynamicHeight=true>
      <mat-tab label="Login">
         <form>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Username">
            </mat-form-field>
            <mat-form-field class="sameWidth">
               <input matInput style="width:100%;" placeholder="Password">
            </mat-form-field>
         </form>
         <button class="sameWidth" mat-raised-button color="primary">Login</button>
         <button class="sameWidth" mat-button color="primary">Forgot Password?</button>
      </mat-tab>
      <mat-tab label="Register">
         <mat-progress-spinner mode="indeterminate"></mat-progress-spinner>
         <mat-vertical-stepper [linear]=true>
            <mat-step [stepControl]="firstFormGroup">
               <form [formGroup]="firstFormGroup">
                  <ng-template matStepLabel>Fill out your name</ng-template>
                  <mat-form-field>
                     <input matInput placeholder="Last name, First name" formControlName="firstCtrl" required>
                  </mat-form-field>
                  <div>
                     <button mat-button matStepperNext>Next</button>
                  </div>
               </form>
            </mat-step>
            <mat-step [active]="true" [stepControl]="secondFormGroup">
            <form [formGroup]="secondFormGroup">
               <ng-template matStepLabel>Fill out your address</ng-template>
               <mat-form-field>
                  <input matInput placeholder="Address" formControlName="secondCtrl" required>
               </mat-form-field>
               <div>
                  <button mat-button matStepperPrevious>Back</button>
                  <button mat-button matStepperNext>Next</button>
               </div>
            </form>
            </mat-step>
            <mat-step>
               <ng-template matStepLabel>Done</ng-template>
               You are now done.
               <div>
                  <button mat-button matStepperPrevious>Back</button>
               </div>
            </mat-step>
         </mat-vertical-stepper>
         <!--<form>
            <table cellspacing="0">
               <tr>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="First Name">
                     </mat-form-field>
                  </td>
                  <td>
                     <mat-form-field>
                        <input style="width: 40%;" matInput placeholder="Last name">
                     </mat-form-field>
                  </td>
               </tr>
            </table>
            <mat-form-field style="width:100%;">
               <input matInput  placeholder="Password">
            </mat-form-field>
            </form>-->
         <mat-checkbox style="z-index: 1000;" color="primary">I Agree to the Terms and Conditions</mat-checkbox>
         <button class="sameWidth" mat-raised-button color="primary">Register</button>
      </mat-tab>
   </mat-tab-group>
</mat-card-content>

组件TS文件

import { Component, OnInit, ViewEncapsulation, Inject } from "@angular/core";
import {
    MatIconRegistry,
    MatDialog,
    MatDialogRef,
    MAT_DIALOG_DATA
} from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
import { HttpClientModule, HttpClient } from "@angular/common/http";
import { FormBuilder, FormGroup, Validators } from "@angular/forms";

@Component({
    selector: "app-login",
    templateUrl: "login.component.html",
    styleUrls: ["login.component.css"]
})
export class LoginComponent {
    animal: string;
    name: string;

    constructor(
        private _formBuilder: FormBuilder,
        iconRegistry: MatIconRegistry,
        sanitizer: DomSanitizer,
        public dialog: MatDialog
    ) {
        iconRegistry.addSvgIcon(
            "close",
            sanitizer.bypassSecurityTrustResourceUrl(
                "assets/icons/ic_close_48px.svg"
            )
        );
    }

    openDialog(): void {
        let dialogRef = this.dialog.open(LoginDialogComponent, {
            width: "400px",
            data: { name: this.name, animal: this.animal }
        });

        dialogRef.afterClosed().subscribe(result => {
            console.log("The dialog was closed");
            this.animal = result;
        });
    }
}
@Component({
    selector: "dialog-login",
    templateUrl: "loginDialog.component.html",
    styleUrls: ["loginDialog.component.css"]
})
export class LoginDialogComponent {
    constructor(
        private _formBuilder: FormBuilder,
        public dialogRef: MatDialogRef<LoginDialogComponent>,
        @Inject(MAT_DIALOG_DATA) public data: any
    ) {}

    onNoClick(): void {
        this.dialogRef.close();
    }

    ngOnInit() {
        this.firstFormGroup = this._formBuilder.group({
            firstCtrl: ["", Validators.required]
        });
        this.secondFormGroup = this._formBuilder.group({
            secondCtrl: ["", Validators.required]
        });
    }
}

我的现状：

我的目标：