检查 Angular 6 组件中的自定义回调答案

【问题标题】：Checking custom callback in Angular 6 component检查 Angular 6 组件中的自定义回调
【发布时间】：2018-06-08 15:34:40
【问题描述】：

我正在使用一个 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 检查也会失败。我相信这是因为发射不返回任何东西，而是广播。这对我来说是新的领域。有人能指出我在这里做错了什么以及如何执行这个额外的验证吗？

【问题讨论】：

标签： angular emit

【解决方案1】：

如果其他人遇到过类似的事情，我就会发现我的问题。我的根本问题是我实际上是在尝试进行同步服务器端检查，但使用的是模板驱动的表单。我从 Angular 文档中阅读了反应式表单，这就是票证——在表单被认为有效之前对给定的表单字段执行自定义验证。

因此我根本不需要弄乱向导组件，现在我可以根据服务调用的结果将表单标记为无效。更好的是，它只在字段满足表单条件时才调用验证（在我的例子中，一旦输入的长度正确，就会尝试额外的验证）。

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

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

【讨论】：