¿Cómo validar los campos en los subcomponentes cuando tratamos de cambiar la pestaña con la ruta?

29 May, 2023 Programación 0

Necesito su ayuda, investigué pero no encontré ninguna solución relevante.

Tengo un componente compartido que tiene este código, que estoy usando para la navegación por pestañas a través de rutas.

<nav mat-tab-nav-bar="" *ngif="navLinks"> <a mat-tab-link="" #tablink="" *ngfor="let link of navLinks; let i = index" [routerlink]="link.link" routerlinkactive="" #rla="routerLinkActive" [active]="rla.isActive" [ngclass]="{'invalid': link.inValid}"> {{link.label}} </a> </nav> <div class="zin-tab-body content"> <router-outlet></router-outlet> </div> <div class="controls" fxlayout="row" fxlayoutgap="32px" fxlayoutalign="flex-start"> <div fxflex="90"></div> <button [disabled]="!hasPrev" mat-raised-button="" color="primary" id="prev-btn" (click)="prev()" mattooltip="previous"> Prev </button> <button [disabled]="!hasNext" mat-raised-button="" color="primary" id="next-btn" (click)="next()" mattooltip="Next"> Next </button> </div>

Para cada ruta que tiene diferentes componentes,

En el siguiente clic desde este componente cambia la raíz.

next() {
    if (this.activeLinkIndex !== (this.navLinks.length -1)) {
      const locationConfig = this.navLinks.find(d => d.index === (this.activeLinkIndex + 1))
      this.router.navigate([`${locationConfig.link}`], { relativeTo: this.route})
    }
  }

En este caso, ¿es posible validar ese subcomponente al hacer clic en siguiente antes de que cambie la ruta? Y restringir el cambio de ruta si es inválido.

next() { const currentLink = this.navLinks[this.activeLinkIndex]; // llama a la función de validación del subcomponente actual const isValid = currentLink.componentRef.instance.validate(); if (isValid && this.activeLinkIndex !== (this.navLinks.length -1)) { const nextLink = this.navLinks.find(d => d.index === (this.activeLinkIndex + 1)); this.router.navigate([`${nextLink.link}`], { relativeTo: this.route}) } }

Answer

davy.ai

May 29, 2023 at 5:29 am
Sí, es posible validar el subcomponente antes de que cambie la ruta. Aquí están los pasos que puedes seguir para lograrlo:
1. Agrega una función en el componente compartido para verificar si el subcomponente actual es válido o no. Para ello, puedes agregar una propiedad en los subcomponentes para indicar si el formulario es válido o no. Por ejemplo, puedes agregar una propiedad llamada isValid en los subcomponentes y establecer su valor en función de la validación del formulario.
```
isValid: boolean;

// agregue este código en el subcomponente después de validar el formulario
this.isValid = this.myForm.valid;
```
1. Modifica el método next() en el componente compartido para llamar a la función de validación del subcomponente actual y comprobar si es válido o no.
```
next() {
    const currentLink = this.navLinks[this.activeLinkIndex];
    // llama a la función de validación del subcomponente actual
    const isValid = currentLink.componentRef.instance.validate();

    if (isValid && this.activeLinkIndex !== (this.navLinks.length -1)) {
      const nextLink = this.navLinks.find(d => d.index === (this.activeLinkIndex + 1));
      this.router.navigate([`${nextLink.link}`], { relativeTo: this.route})   
    }
  }
```
1. Actualiza la navegación del router para que solo suceda si el subcomponente actual es válido.
Con estos cambios, el componente compartido verificará el subcomponente actual para su validación al hacer clic en next y solo permitirá que cambie la ruta si el subcomponente es válido.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Cómo validar los campos en los subcomponentes cuando tratamos de cambiar la pestaña con la ruta?

Answer

davy.ai