Tengo un formulario con dos pestañas y un botón de guardar (fuera de la pestaña). La primera pestaña tiene un cuadro de texto con la validación requerida. De alguna manera, la validación "requerida" no se activa cuando el usuario ha abierto la segunda pestaña (es decir, la primera pestaña está inactiva) y hace clic en el botón Guardar.
Código 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>Código TS:
onSave(form) { if (!form.valid) { // Valid returns true when the user has opened the second tab and click on save return }; }¿Cómo puedo arreglar esto?
ngbNav proporciona una función para mantener los elementos dom ocultos en caso de que sean de pestañas no activas. En su caso, como su elemento está en otra pestaña, puede mantenerlo en DOM, que puede validarse fácilmente.
Necesita usar [destroyOnHide]="false" en ul (donde se agrega ngbNav).
Usar [destroyOnHide]="false" sería una solución rápida. A la larga, vale la pena considerar las formas reactivas .
Es flexible y maneja cualquier escenario complejo. Es más código de componente y menos marcado HTML, lo que es más fácil de cubrir con pruebas unitarias.
Sin embargo, lleva tiempo dominarlo. Se requerirían algunas horas de capacitación o lectura de documentos.
Si la pestaña está inactiva, se elimina del DOM. Por lo tanto, el campo no existe y no se puede validar. Le sugiero que tenga un campo separado para los errores y, en función de ese campo, muestre u oculte los mensajes de error.