垫步进机组件中的每一步 [英] mat-stepper every step in component

问题描述

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

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属性传递到每个步骤，直到用户将其变为true为止，否则该步骤将不允许用户继续.请注意，如果同时设置了complete和stepControl，则将优先使用stepControl.

Alternatively, if you don't want to use the Angular forms, you can pass in the completed property to each of the steps which won't allow the user to continue until it becomes true. Note that if both completed and stepControl are set, the stepControl will take precedence.

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

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