ngbNav 中的非活动选项卡验证答案

【问题标题】：Inactive tab validation in ngbNavngbNav 中的非活动选项卡验证
【发布时间】：2021-10-16 16:30:32
【问题描述】：

我有一个带有两个选项卡和一个保存按钮（选项卡外）的表单。第一个选项卡具有需要验证的文本框。当用户打开第二个选项卡（即第一个选项卡处于非活动状态）并单击“保存”按钮时，“必需”验证不会以某种方式触发。

HTML 代码：

<form #frm="ngForm" (ngSubmit)="onSave(frm)" >
    <button type="submit">Save</button>
    <ul ngbNav #nav="ngbNav" class="nav-tabs">
        <li [ngbNavItem]="1">
            <a ngbNavLink>Details</a>
            <ng-template ngbNavContent>
                <input type="number" class="form-control numeric" id="inputNumber" name="inputNumber"
                        [(ngModel)]="inputNumber" required />
    
            </ng-template>
        </li>
        <li [ngbNavItem]="1">
            <a ngbNavLink>Charts</a>
            <ng-template ngbNavContent>
            </ng-template>
        </li>
    </ul>
</form>

TS 代码：

onSave(form) {
    if (!form.valid) { // Valid returns true when the user has opened the second tab and click on save
      return
    };
}

我该如何解决这个问题？

【问题讨论】：

标签： javascript html angular bootstrap-4 ng-bootstrap

【解决方案1】：

ngbNav 提供了隐藏 dom 元素的功能，以防它们来自非活动选项卡。在您的情况下，由于您的元素位于另一个选项卡中，您可以将其保存在 DOM 中，这很容易验证。

需要在ul上使用[destroyOnHide]="false"（这里加了ngbNav）。

More Info

【讨论】：

【解决方案2】：

使用[destroyOnHide]="false" 将是一个快速修复。从长远来看，值得考虑reactive forms。

它很灵活，可以处理任何复杂的场景。它是更多的组件代码和更少的 HTML 标记，更容易被单元测试覆盖。

不过需要时间来掌握。需要几个小时的培训或阅读文档。

【讨论】：

【解决方案3】：

如果选项卡处于非活动状态，则它会从 DOM 中移除。因此该字段不存在且无法验证。我建议您为错误设置单独的字段，并根据该字段显示或隐藏错误消息。

【讨论】：

你可以使用响应式表单（一个 formGroup 独立存在）而不是模板驱动表单
@Eliseo - 谢谢。看起来 Reactive Forms 将成为它的解决方案。将模板驱动的表单转换为 Reactive 是否需要大量工作？
@softwareEngineer - 是的，它不在 DOM 上。有没有办法将它保存在 DOM 中但不可见？另外，您能否扩展一下“我建议您为错误设置单独的字段，并根据该字段显示或隐藏错误消息。”
您在 onSave 函数中有一个 inputNumber 模型，您可以检查 inputNumber 是否已填充。如果没有，那么您可以显示一些消息，说明填写该字段。
这意味着我将不得不添加重复验证。我认为可能有更好的方法来处理这个问题？