添加重新激活验证器以使用选项卡中子组件中的输入形成

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 提供一些以数据为中心的验证功能，而不仅仅是基于表单/组件的验证。

注意：此示例使用模板驱动的表单，但您可以对反应式表单使用类似的东西。