CODEWITHSUNDEEP
angularkendo-ui-angular2
dev_in_progress
dev_in_progress

Reputation: 2494

Kendo angular form validation in TabStrips

Im using angular 4 and kendo for angular. I have form that contains tabs.

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

On submit, first tab is active and second is not, input with name="mailTo" in second tab is not validate and validation passes. Probably because second tab is hidden. Is there a way to validate inputs in inactive tabs?

Upvotes: 0

Views: 1098

Answers (1)

cseils
cseils

Reputation: 423

If you include [keepTabContent]="true" this will persist all tab content in the DOM even when the tab is not selected. That way all your input validators are run on inactive tabs when you press Save

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

Upvotes: 2

Related Questions