You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
52 lines
2.0 KiB
52 lines
2.0 KiB
5 years ago
|
<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>
|
||
|
|
|
||
|
|
|