Skip to main content
AngularJS(Angular 1) y Angular(Angular 2+) son considerados frameworks distintos. Aquí se utiliza solo Angular por tanto lo correcto es poner solo esa etiqueta en la pregunta para evitar confusiones y que solo aparezca en las búsquedas de la etiqueta correspondiente.
Enlace
Origen Enlace

Validar formulario en NbStepperComponent antes de ejecutar nbStepperNext

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