Question

我正在使用Angular 2+向导组件（我在Angular 6上），我分叉到我的项目中并做了很多模板和样式定制。不幸的是，我选择的那个并不支持其他向导中的canExit功能，所以我试图添加它。它能够在步骤中验证表单，所以当我需要做的不仅仅是简单的字段验证时，我通常只能添加另一个自定义验证函数：

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid && validateStep1()'>
    <form>....

问题是由于Angular的观察和变化检测，我会重复调用它。通常情况下这不是问题，但我想在他们点击Next时只进行一次服务器端验证。反复调用它是一个非首发。

所以我想我需要将一个回调函数作为参数传递给子向导步骤组件：

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid' [canExit]='validateStep1()'>
    <form>....

在父组件中，我创建了验证函数：

validateStep1(){
    console.log('calling server...');
    // assume this is a server-side call, returning true/false
    return serverValidationPassed();
}

在向导步骤组件中，我添加了：

@Input() canExit: boolean = true;

在自定义向导中，我检查此回调是否失败，如果是，则阻止正常的步骤更改：

public next(): void {
    if(!this.activeStep.canExit){
        console.log('failed!');
        return;
    }
    else {
        //proceed to next step as usual
    }
}

问题是验证仍然被多次调用，我回到了我开始的地方！我读到了使用@Output来传递函数，所以我尝试了这种方法：

<custom-wizard>
  <wizard-step [title]='Step 1' [isValid]='step1Form.valid' (canExit2)='validateStep1()'>
    <form>....

在向导步骤中：

    @Output() canExit2: EventEmitter<any> = new EventEmitter<any>();

在向导的下一个功能中：

    public next(): void {
    if(!this.activeStep.canExit2.emit()){
        console.log('failed!');
        return;
    }
    else {
        //proceed to next step as usual
    }
}

验证步骤现在只调用一次，很好。但即使validateStep1通过，我也会在if检查中失败。我相信它是因为一个发射器不会返回任何东西，而是广播。这对我来说是一个新的领域。有人可以指出我在这里做错了什么，以及我如何进行额外的验证？

Answer 1

如果有其他人经历过类似的事情，我想出了我的问题。我的根本问题是我本质上是尝试进行同步服务器端检查，但使用模板驱动的表单。我从Angular文档中读取了Reactive表单，这就是票证 - 在表单被认为有效之前，对给定的表单字段执行自定义验证。

因此我根本不需要弄乱向导组件，因为我可以根据服务调用的结果将表单标记为无效。甚至更好的是它只在字段符合表单标准时才调用验证（在我的情况下，一旦输入的长度正确，就会尝试进行额外的验证）。

这是对自定义异步验证的一个很好的概述，他唯一想念的是你需要将ReactiveFormsModule导入你的模块：

https://alligator.io/angular/async-validators/

检查Angular 6组件

1 个答案: