Monday, 16 August 2021

Inactive tab validation in ngbNav

I have a form with two tabs and a save button (outside the tab). The first tab has textbox with required validation. Somehow the "required" validation does not fire when user has opened second tab (i.e. first tab is inactive) and click on save button.

HTML Code:

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

onSave(form) {
    if (!form.valid) { // Valid returns true when the user has opened the second tab and click on save
      return
    };
}

How can I fix this?



from Inactive tab validation in ngbNav

No comments:

Post a Comment