如何在角度4中实现步进器验证？

Question

当我仅在使用角步进器时不访问任何先前步骤的情况下，仅在访问最后一步时如何一次对所有未访问的步骤进行验证，目前，我只能对已访问的步骤进行验证。

HTML

<form [formGroup]="PForm" (ngSubmit)="onSubmit()">
        <mat-horizontal-stepper labelPosition="bottom" [linear]="false" #stepper (selectionChange)="runValidation(stepper)">
            <mat-step [stepControl]="PForm.get('Component1')">
                <ng-template matStepLabel>
                    <div class="stepper-label" [ngClass]="{'has-error': showStepWarning('component1') }">
                        <span class="stepper-error-icon">!</span>                        
                        <span class="stepper-label-text">Component1</span>
                    </div>
                </ng-template>
                <app-component1 [component1]="PForm.get('Component1')"> </app-component1>          
            </mat-step>
<mat-step [stepControl]="PForm.get('Component2')">
                <ng-template matStepLabel>
                    <div class="stepper-label" [ngClass]="{'has-error': showStepWarning('component2')}">
                        <span class="stepper-error-icon">!</span>                        
                        <span class="stepper-label-text">Component2</span>
                    </div>
                </ng-template>        
                <app-component2 [component2]="PForm.get('Component2')"></app-component2>            
            </mat-step>
            <mat-step [stepControl]="PForm.get('Component3')">
                <ng-template matStepLabel>
                    <div class="stepper-label" [ngClass]="{'has-error': showStepWarning('component3')}">
                        <span class="stepper-error-icon">!</span>                        
                        <span class="stepper-label-text">Component3</span>
                    </div>
                </ng-template>        
                <app-component3 [component3]="PForm.get('Component3')"></app-component3>            
            </mat-step>
            <mat-step label="Done">
                <mat-card style="height:30vh; padding-top: 100px;">
                    <div style="text-align: center;">
                    <span class="mr-3 mx-3">
                            <button type="submit" mat-raised-button color="primary">
                                Submit
                            </button>
                        </span>
                    </div>
                </mat-card>
                <div class="navigation-bar" fxLayout="row" fxLayoutAlign="space-evenly center">
                </div>
            </mat-step>
        </mat-horizontal-stepper>
    </form>

TS。

    showStepWarning(stepFormName) {
        let stepForm = this.PWWCForm.get(stepFormName);
        if (stepForm.valid || (!stepForm.dirty && !stepForm.touched)) {
          return;
        }
        return true;
      }

      runValidation(stepper) {
        let formGroup = stepper.selected.stepControl;
        if (!formGroup) {
          return;
        }

        formGroup.markAsTouched({ onlySelf: true });
        this.validateAllFormFields(formGroup);    
      }

谢谢。