Angular 形 Material 步进器在选择更改之前并防止某些条件下的步进变化

Question

我正在使用线性垫步进器。

它与 next 一起工作正常。我进行 api 调用，如果成功，则调用 stepper-next 事件而不是使用 matStepperNext 指令。

现在，当用户在第 1 步和 填写所有数据时直接点击在其他 进入标题 r 的下一个(或任何其他编辑记录模式)然后它将重定向到下一步，因为表单是有效的。

我想做前服务电话那个&防止阶跃直到服务调用成功那么只有它应该重定向到下一步，否则它不应该。

我在文档中找不到任何方法来实现此功能。

任何人都可以建议我该怎么做。我不想禁用标题单击。

Answer 1

我不确定这是否是最好的模式，但它对我有用。欢迎提出建议。

1)使垫子步进线性

<mat-vertical-stepper [linear]="true" #stepper>

  ....

</mat-vertical-stepper>

2) 使步骤不可编辑、不可选择并将 stepControl 与 FormGroup 关联

  <mat-step [editable]="false" [optional]="false" [stepControl]="desiredServiceFormGroup">

    <form [formGroup]="desiredServiceFormGroup">

      ...

    </form>

  </mat-step>

3) 将控件添加到您的 FormGroup 中，用于 HTML 中描述的表单项，并添加一个额外的控件，用于 html 代码中不存在的表单控件(在此示例中，我添加了名为“x”的控件，在我的 html 代码中不存在)

ngOnInit() {

  this.desiredServiceFormGroup = this.formBuilder.group({
    desiredTarget: [ '', Validators.required],
    paymentAgreed: ['', Validators.required],

    ...

    x: ['', Validators.required]
  });

}

使用这个额外的验证器，您的 stepControl 将始终为 false。
当 stepControl 为 false 时，step 不是可选的，不可编辑且 stepper 是线性的，直接单击 step headers 不会更改当前 step。

5) 按钮将不会与 formControl 关联(在这种情况下，它将始终处于禁用状态)。就我而言，我手动验证每个表单项

<button [disabled]="desiredTarget == null || !paymentAgreed" (click)="createVerification(desiredTarget.targetId, stepper)">NEXT</button>

6)进行所需的操作，完成后，删除使表单控件始终无效的额外控件，并以编程方式进入下一步。

async createVerification(targetId: number, stepper?: MatStepper) {

  this.verification = await this.dataService.createVerification(targetId);

  if (stepper !== undefined) {
    this.desiredServiceFormGroup.removeControl('x');
    stepper.next();
  }

}

7)如果你需要重置步进器，提醒添加额外的控件到FormControl

reset(stepper?: MatStepper) {
  this.desiredServiceFormGroup.addControl('x', new FormControl('', [Validators.required]));
  stepper.reset();
}