mat-stepper 组件中的每一步

问题描述

我想实现一个 mat-stepper，每一步都在不同的组件中，我的问题是如果步骤没有完成，我的问题是防止点击下一步按钮:

I would like to implement a mat-stepper, every step is in a different component, my problem is to prevent the next button is clicked if the step is not completed:

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 之外，一切正常，即使表单无效，也可以进入下一步.

Everything works but the stepControl, it is possible to go to next step even when the form is not valid.

我的错误在哪里?

推荐答案

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

You are using [stepControl] and [completed] at the same time. In this case stepControl is going to be interpreted as more important as [completed]. As stated in official documentation:

或者，如果您不想使用 Angular 表单，您可以将完成的属性传递给每个步骤，这将不允许用户继续，直到它变为真.注意如果同时设置了completed和stepControl，则stepControl优先.

这是链接> https://material.angular.io/components/stepper/概述

这篇关于mat-stepper 组件中的每一步的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！