javascript - 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

ngbNav 提供保留隐藏 dom 元素的功能，以防这些元素来自非事件选项卡。在您的情况下，由于您的元素位于另一个选项卡中，您可以将其保留在 DOM 中，这样可以轻松验证。

需要在 ul 上使用[destroyOnHide]="false"(其中添加了 ngbNav)。

More Info