ShangHaiYuan-AnXin/src/app/ui/stepper/stepper.component.html

<button mat-raised-button (click)="isLinear = !isLinear" id="toggle-linear">
  {{!isLinear ? '切换为线性' : '切换为非线性'}}
</button>
<!-- 整个流程总标签 -->
<!-- mat-vertical-stepper是垂直方向 -->
<!-- labelPosition可以定义标签位置 -->
<!-- linear控制只有在完成前面步骤才可以进行后续步骤 -->
<mat-horizontal-stepper [linear]="isLinear" #stepper>
    <!-- 第一步 -->
    <!-- stepControl检查步骤有效性 -->
    <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
            <ng-template matStepLabel>填写姓名</ng-template>
            <mat-form-field>
                <!-- 指定控制器名称 -->
                <!-- 过滤器-必填 -->
                <input matInput placeholder="姓名" formControlName="firstCtrl" required>
            </mat-form-field>
            <div>
                <!-- 必须添加type="button"防止提交 -->
                <button mat-button matStepperNext type="button">下一步</button>
            </div>
        </form>
    </mat-step>
    <!-- 第二步 -->
    <!-- optional属性表示可选 -->
    <mat-step [stepControl]="secondFormGroup" optional="true">
        <form [formGroup]="secondFormGroup">
        <ng-template matStepLabel>家庭住址</ng-template>
        <mat-form-field>
            <input matInput placeholder="住址" formControlName="secondCtrl" required>
        </mat-form-field>
        <div>
            <!-- 步骤按钮 -->
            <button mat-button matStepperPrevious type="button">上一步</button>
            <button mat-button matStepperNext type="button">下一步</button>
        </div>
        </form>
    </mat-step>
    <!-- 第三步 -->
    <mat-step>
        <ng-template matStepLabel>完成</ng-template>
        你已经完成了
        <div>
        <button mat-button matStepperPrevious>上一步</button>
        <button mat-button (click)="stepper.reset()">重置</button>
        </div>
    </mat-step>
</mat-horizontal-stepper>