mat-stepper 组件中的每一步答案

【问题标题】：mat-stepper every step in componentmat-stepper 组件中的每一步
【发布时间】：2019-09-12 14:49:59
【问题描述】：

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

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

我的错误在哪里？

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

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

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

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

【讨论】：

谢谢，有没有这个[已完成]我都试过了，还是不行