ngbNav 中的非活动选项卡验证

Question

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

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
    };
}

我该如何解决这个问题？

Answer 1

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

Answer 2

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

需要在 ul（添加 ngbNav 的地方）上使用 [destroyOnHide]="false"。

More Info

Answer 3

使用 [destroyOnHide]="false" 可以快速解决问题。在长运行中，值得考虑reactive forms.

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

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

ngbNav 中的非活动选项卡验证

Inactive tab validation in ngbNav

html

javascript

bootstrap-4

ng-bootstrap

angular