我正在使用线性垫步进器。
它与 next 一起工作正常。我进行 api 调用,如果成功,则调用 stepper-next 事件而不是使用 matStepperNext 指令。
现在,当用户在第 1 步和 填写所有数据时直接点击在其他 进入标题 r 的下一个(或任何其他编辑记录模式)然后它将重定向到下一步,因为表单是有效的。
我想做前服务电话那个&防止阶跃直到服务调用成功那么只有它应该重定向到下一步,否则它不应该。
我在文档中找不到任何方法来实现此功能。
任何人都可以建议我该怎么做。我不想禁用标题单击。
最佳答案
我不确定这是否是最好的模式,但它对我有用。欢迎提出建议。
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();
}
关于 Angular 形 Material 步进器在选择更改之前并防止某些条件下的步进变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55497836/