Kendo angular TabStrip 中的表单验证

Question

我使用 angular 4 和 kendo 用于 angular。我有包含制表符的表格。

<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 中的所有选项卡内容，即使未选择选项卡也是如此。这样，当您按保存

时，所有输入验证器都在非活动选项卡上运行

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

Kendo angular TabStrip 中的表单验证

Kendo angular form validation in TabStrips

kendo-ui-angular2

angular