在执行 nbStepperNext 之前验证 NbStepperComponent 中的表单

Question

I'm working with nebular's NbStepperComponent in Angular 2 , so far it works fine, only that when I go to the next step I want to perform a previous validation from in a function and just execute nbStepperNext but I don't know how to execute the nbStepperNext from a function , since its documentation It does it directly from the HTML like this <button nbButton nbStepperNext> next </button>

I would like: "Execute the nbStepperNext from a function"

something like that, but I don't know the correct syntax:

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

validacion(){
//códe validation
       stepper.next(); // and next step
}

My base code

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

Answer 1

According to the documentation, next() and previous() are part of NbStepperComponent . Therefor, your solution should be:

@Component({
    selector: 'nb-stepper-test',
    template: `
        <nb-stepper #stepper>
          <nb-step>
            ...
          </nb-step>
          <nb-step>
            ...
          </nb-step>
          <nb-step>
            ...
          </nb-step>
        </nb-stepper>
      `,
})
export class StepperTestComponent {
    @ViewChild('stepper') stepper: NbStepperComponent;

    validacion() {
        // Form validation goes here...
        this.stepper.next();
    }
}