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

【问题标题】：Validate form in NbStepperComponent before executing nbStepperNext在执行 nbStepperNext 之前验证 NbStepperComponent 中的表单
【发布时间】：2021-04-04 08:23:26
【问题描述】：

我正在使用Angular 2 中的星云NbStepperComponent，到目前为止它工作正常，只是当我进入下一步时，我想从function 中执行先前的验证，然后执行@987654324 @ 但我不知道如何从 function 执行 nbStepperNext，因为它的文档是直接从 HTML 中执行的，就像这样 <button nbButton nbStepperNext> next </button>

我想：“从函数中执行nbStepperNext”

类似的东西，但我不知道正确的语法：

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

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

我的基本代码

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

【问题讨论】：

标签： angular nebular nebula

【解决方案1】：

根据文档，next() 和 previous() 是 NbStepperComponent 的一部分。因此，您的解决方案应该是：

@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();
    }
}

【讨论】：