TabStrips中的剑道角形验证

Question

我用角4和剑道作角。我有包含选项卡的表单。

<form class="form-horizontal" #f="ngForm" (submit)="update(f.valid)" novalidate>
    <kendo-tabstrip>
        <kendo-tabstrip-tab [title]="'Main settings'" [selected]="true">
         .
         .
         .
        </kendo-tabstrip-tab>
        <kendo-tabstrip-tab [title]="'Working time'">
            <div class="col-md-12">
                <div class="col-md-2">
                    <span> mail to</span>
                </div>
                <div class="col-md-10">
                    <input class="k-textbox" name="mailTo" [(ngModel)]="mailTo" required/>
                </div>
                <div class="col-sm-12" [hidden]="!f.submitted">
                    <small [hidden]="mailTo" class="text-danger">Please enter mail to</small>
                </div>
            </div>
        </kendo-tabstrip-tab>
    </kendo-tabstrip>
    <button kendoButton type="submit" [primary]="true">Save</button>
</form>

在提交时，第一个选项卡是活动的，第二个选项卡不是活动的，第二个选项卡中的name="mailTo"输入没有验证和验证通过。可能是因为第二个标签被隐藏了。是否有一种方法来验证非活动选项卡中的输入？

Answer 1

如果包含keepTabContent="true“，即使没有选中选项卡，这也会使DOM中的所有选项卡内容保持不变。这样，当您按Save时，所有输入验证器都在非活动选项卡上运行。

<kendo-tabstrip [keepTabContent]="true">
    <kendo-tabstrip-tab [title]="'Main settings'" [selected]="true">
...