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