0

Estoy trabajando con NbStepperComponent de nebular en Angular 2, hasta ahora funciona bien, solo que al pasar al siguiente paso quiero realizar una previa validación desde en una función y recién ejecutar nbStepperNext pero no se como ejecutar el nbStepperNext desde una funcion, ya que su documentacion lo hace directamente desdel el HTML asi <button nbButton nbStepperNext>next</button>

Quisiera:"Ejecutar el nbStepperNext desde una function "

algo asi:

<button (click)="validacion()" type="button">Next</button>

validacion(){
//código de la validacion
       stepper.next(); // y pasar al siguiente paso
}

-Mi código base

    import { Component } from '@angular/core';
    
    @Component({
      selector: 'nb-stepper-test',
      template: `
        <nb-stepper>
          <nb-step>
            <ng-template nbStepLabel>First step</ng-template>
            <div class="step-container">
              <h3>Información personal</h3>
<div class="row">
        <div class="col-sm-4">
            <div class="form-group">
                <label for="nombre" style="width: 100%;" class="label">First Name</label>
                <input  type="text" nbInput id="nombre" fieldSize="small"  formControlName="nombre" fullWidth>
            </div>
        </div>
        <div class="col-sm-4">
            <label for="paterno" class="label">Last Name</label>
            <input type="text" nbInput id="paterno" fieldSize="small" formControlName="paterno" fullWidth>
        </div>
        <div class="col-sm-4">
            <label for="correo" class="label">Correo</label>
            <input type="text" nbInput id="correo" fieldSize="small" formControlName="correo"  fullWidth>
        </div>
</div>
              <button class="btn btn-primary" disabled nbStepperNext>prev</button>
              <button class="btn btn-primary" nbStepperNext>next</button>
            </div>
          </nb-step>
          <nb-step>
            <ng-template nbStepLabel>Second step</ng-template>
            <div class="step-container">
              <h3>Step content #2</h3>
              <button class="btn btn-primary" nbStepperPrevious>prev</button>
              <button class="btn btn-primary" nbStepperNext>next</button>
            </div>
          </nb-step>
          <nb-step label="Third step">
            <div class="step-container">
              <h3>Step content #3</h3>
              <button class="btn btn-primary" nbStepperPrevious>prev</button>
              <button class="btn btn-primary" nbStepperNext>next</button>
            </div>
          </nb-step>
          <nb-step>
            <ng-template nbStepLabel>Fourth step</ng-template>
            <div class="step-container">
              <h3>Step content #4</h3>
              <button class="btn btn-primary" nbStepperPrevious>prev</button>
              <button class="btn btn-primary" disabled nbStepperNext>next</button>
            </div>
          </nb-step>
        </nb-stepper>
      `,
    })
    export class StepperTestComponent {
    }

1 respuesta 1

1

Crea una referencia a NbStepperComponent usando @ViewChild y con eso ya puedes llamar a los métodos que expone la API de ese componente.

export class StepperTestComponent {

  @ViewChild(NbStepperComponent) stepper : NbStepperComponent

  next(){
      this.stepper.next()
   }

}
1
  • y como realizaría el import de NbStepperComponent para que no me marque en error el @viewChild? Commented el 27 dic. 2020 a las 21:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.