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

问题描述

我想实现一个 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优先.

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/概述

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