添加重新激活验证器以使用选项卡中子组件中的输入进行表单

Question

我创建了一个表单（在父级中），有2个输入，每个子组件中有一个（每个组件都在ngbootstrap选项卡中）。我将表单组传递给每个子组件，然后将验证器添加到每个组件的ngOnInit中的表单组中。

我发现每个组件的ngOnInit仅在我单击以查看选项卡后运行。这意味着在我查看每个标签后（如果输入以无效状态开始），无法确定整体表单的有效性。

处理此问题的正确方法是什么？由于在查看选项卡之后才创建表单组件，因此我无法在父项中添加验证程序。

Answer 1

我遇到了同样的事情。就我而言，除了内置的验证器之外，我还决定直接处理验证。

内置验证器为用户提供特定选项卡上的即时反馈。然后，我的验证码会跟踪数据模型的整体有效性。

我的代码在这里：https://github.com/DeborahK/Angular-Routing查看APM-Final文件夹。

然后，我可以在任何有这样验证错误的标签上添加一个图标：

我的验证方法如下所示：

private dataIsValid: { [key: string]: boolean } = {};

validate(): void {
    // Clear the validation object
    this.dataIsValid = {};

    // 'info' tab
    if (this.product.productName &&
        this.product.productName.length >= 3 &&
        this.product.productCode) {
        this.dataIsValid['info'] = true;
    } else {
        this.dataIsValid['info'] = false;
    }

    // 'tags' tab
    if (this.product.category &&
        this.product.category.length >= 3) {
        this.dataIsValid['tags'] = true;
    } else {
        this.dataIsValid['tags'] = false;
    }
}

其中dataIsValid是一组定义每个标签名称的键和值对，如果其内容有效则为true，否则为false。

这需要一些重复的代码（这里的代码与HTML中的验证器相匹配）......但是在Angular提供一些数据聚焦验证功能而不仅仅是基于表单/组件的验证之前，这似乎是必要的。

注意：此示例使用模板驱动的表单，但您可以使用类似的活动表单。