0

我正在使用 nebular 的NbStepperComponent，Angular 2到目前为止它工作正常，只是当我进入下一步时，我想从 a 执行先前的验证function并执行nbStepperNext，但我不知道如何nbStepperNext从 a执行function，因为它的文档它直接从 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 {
    }
4

1 回答 1

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();
    }
}
于 2020-12-29T07:51:15.083 回答