Angular mat步进机中的每一步组件

我想实现一个mat步进机，每个步骤都在不同的组件中，我的问题是，如果步骤未完成，则阻止单击“下一步”按钮：

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);
}

parent.html：
步骤2/ng模板>
parent.ts：
stepOneForm：FormGroup；
stepTwoForm：FormGroup；
//////////
updateStepOne（步骤：FormGroup）{
this.stepOneForm=步骤；
}
updateStepTwo（步骤：FormGroup）{
this.stepTwoForm=步骤；
}
child-1.html
向前箭头
child-1.ts
this.stepOne=this.fb.group({
标题：[“默认标题”[
需要验证器
]]
});
updateStepOne（）{
this.steponemitter.emit（this.stepOne）；
}

除了stepControl之外，其他一切都可以工作，即使表单无效，也可以转到下一步

---

我的错误在哪里？

您正在同时使用

[stepControl]

和

[completed]

。在这种情况下，

步进控制

将被解释为与

[completed]

一样重要。如官方文件所述：

或者，如果不想使用角度形式，可以将completed属性传递到每个步骤，直到它变为true，用户才能继续。请注意，如果同时设置了completed和stepControl，则stepControl将优先

---

这是链接>

谢谢，我试过了这个[完成]，也试过了，但无论如何都不行