Question

我想实现一个垫式步进器，每个步骤都在一个不同的组件中，我的问题是如果该步骤未完成，则要防止单击下一步按钮：

parent.html:
<mat-horizontal-stepper>
  <mat-step [stepControl]="stepOneForm [completed]="stepOneForm?.valid">
    <ng-template matStepLabel>Step1</ng-template>
    <child-step-1 
       [stepOne]="stepOneForm"
       (stepOneEmitter)="updateStepOne($event)">
    </child-step-1 >
  </mat-step>
  <mat-step [stepControl]="stepTwoForm [completed]="stepTwoForm?.valid">
    <ng-template matStepLabel>Step2/ng-template>
    <child-step-2 
       [stepTwo]="stepTwoForm"
       (stepTwoEmitter)="updateStepTwo($event)">
    </child-step-2 >
  </mat-step>
</mat-horizontal-stepper>

parent.ts:
stepOneForm: FormGroup;
stepTwoForm: FormGroup;
 //////////
updateStepOne(step: FormGroup) {
    this.stepOneForm = step;
}

updateStepTwo(step: FormGroup) {
   this.stepTwoForm = step;
}

child-1.html
<form [formGroup]="stepOne" (change)="updateStepOne()">
   <mat-form-field>
    <input matInput required type="text" formControlName="title"/>
   </mat-form-field>
   <button mat-button matStepperNext><mat-icon>arrow_forward</mat-icon></button>
</form>
child-1.ts
this.stepOne = this.fb.group({
  title: ['Default title', [
    Validators.required
  ]]
});

updateStepOne() {
  this.stepOneEmitter.emit(this.stepOne);
}

一切正常，但stepControl仍然有效，即使表单无效也可以进行下一步。

我的错误在哪里？

Answer 1

您正在同时使用[stepControl]和[completed]。在这种情况下，stepControl将被解释为比[completed]更重要。如官方文档所述：

或者，如果您不想使用Angular表单，则可以将completed属性传递给每个步骤，直到用户将其设置为true时，该步骤才允许用户继续。请注意，如果同时设置了complete和stepControl，则将优先使用stepControl。

这里是链接> https://material.angular.io/components/stepper/overview

逐步执行组件

1 个答案: