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

Posted 2023-03-13

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

【英文标题】：Adding reactivate validators to form with inputs in child components in tabs

【发布时间】：2018-02-15 09:53:47

【问题描述】：

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

我发现每个组件的 ngOnInit 仅在我单击查看选项卡后才运行。这意味着在我查看每个选项卡之后才能确定整个表单的有效性（以防输入以无效状态开始）。

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

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

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

【讨论】：

这与我的情况非常相似——我想我可以采取同样的方法。我会等着看是否有人知道如何使用内置的表单级验证器，但你的建议肯定是可行的。