时间戳

首页 > 解决方案 > 角材料步进器在选择更改之前并防止在某些条件下进行步进更改

angular - 角材料步进器在选择更改之前并防止在某些条件下进行步进更改

问题描述

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

它适用于下一个。我做 api 调用 & 如果它成功然后我调用 stepper-next 事件而不是使用 matStepperNext 指令。

现在，当用户在第 1 步填写所有数据并直接单击下一步标题 r 中的其他步骤（或任何其他编辑记录模式）时，由于表单有效，它将重定向到下一步。

我想在此之前进行服务调用并防止步骤更改，直到服务调用成功然后它才应该重定向到下一步，否则它不应该。

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

谁能建议我该怎么做。我不想禁用标题点击。

标签： angularangular-cdkangular-material-7angular-material-stepper

解决方案

以下方法对我有用：

  1. 使 mat-stepper 线性化
<mat-vertical-stepper [linear]="true" #stepper>

  ....

</mat-vertical-stepper>
  1. 使步骤不可编辑，不是可选的，并将 stepControl 与 FormGroup 关联
<mat-step [editable]="false" [optional]="false" [stepControl]="desiredServiceFormGroup">
  
    <form [formGroup]="desiredServiceFormGroup">
  
      ...
  
    </form>
  
</mat-step>
  1. 为您在 HTML 中描述的表单项添加控件到您的 FormGroup 并添加一个额外的控件。对于您的 html 代码中不存在的表单控件（在此示例中，我添加了名为“x”的控件，在我的 html 代码中不存在）
ngOnInit() {
  
  this.desiredServiceFormGroup = this.formBuilder.group({
    desiredTarget: [ '', Validators.required],
    paymentAgreed: ['', Validators.required],

    ...

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

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

  1. 按钮不会与 formControl 关联（在这种情况下，它将始终被禁用）。就我而言，我手动验证每个表单项
<button [disabled]="desiredTarget == null || !paymentAgreed" (click)="createVerification(desiredTarget.targetId, stepper)">NEXT</button>
  1. 进行所需的操作，完成后，删除使表单控件始终无效的额外控件。以编程方式进行下一步。
async createVerification(targetId: number, stepper?: MatStepper) {
  
  this.verification = await this.dataService.createVerification(targetId);
  
  if (stepper !== undefined) {
    this.desiredServiceFormGroup.removeControl('x');
    stepper.next();
  }
  
}
  1. 如果您需要重置步进器，请将额外的控件添加到 FormControl
reset(stepper?: MatStepper) {
  this.desiredServiceFormGroup.addControl('x', new FormControl('', [Validators.required]));
  stepper.reset();
}

推荐阅读