角度 nb-step 和 nb-select 验证答案

【问题标题】：Angular nb-step and nb-select validation角度 nb-step 和 nb-select 验证
【发布时间】：2021-05-18 09:34:21
【问题描述】：

在这段代码中：

<nb-stepper #stepper orientation="horizontal">
    <!-- **************** STEP N1 **************** -->
    <nb-step [label]="labelOne">
        <ng-template #labelOne>Area</ng-template>
        <h5>Select Area</h5>
        <nb-select selected="INFO" (selectedChange)="changeStepperArea($event)"
                   placeholder="Disabled option">
           <nb-option value="INFO" disabled>Select Area...</nb-option>
           <nb-option *ngFor="let obj of areaList" [value]="obj.key">{{obj.name}}</nb-option>
        </nb-select>
        <button nbButton disabled nbStepperPrevious>back</button>
        <button nbButton nbStepperNext>next</button>
    </nb-step>
    <!-- **************** STEP N2 **************** -->
    <nb-step [label]="labelTwo">
        <ng-template #labelTwo>Device</ng-template>
        <h5>Select Device</h5>
        <nb-select #myselect [selected]="selectedStepperArea" disabled placeholder="Disabled">
           <nb-option *ngFor="let obj of areaList" [value]="obj.key">{{obj.name}}</nb-option>
        </nb-select>
        <nb-select selected="INFO" (selectedChange)="changeStepperDevice($event)"
                   placeholder="Disabled option">
           <nb-option value="INFO" disabled>Select Device...</nb-option>
           <nb-option value="1">1</nb-option>
           <nb-option value="2">2</nb-option>...
         </nb-select>
         <button nbButton nbStepperPrevious>back</button>
         <button nbButton nbStepperNext>next</button>
     </nb-step>
</nb-stepper>

如何验证第 2 步之前的第一个 nb-select 是否有值？？？我希望它在选择步骤 N1 之前不要继续执行步骤 N2...

很多

【问题讨论】：

在这里找到了解决方案：stackoverflow.com/questions/65462784/…

标签： angular select form-control nebular stepper

【解决方案1】：

在这里找到了解决方案

Validate form in NbStepperComponent before executing nbStepperNext

HTML

<span *ngIf='isError'>*ERROR</span>
<button nbButton (click)="nextStep('stepperName')">continue</button>

组件：

nextStep(stepper: string) {
 switch (stepper) {
  case '1':
    do your control
    break;
  case '2':
    do your control
    break;
 }
 if (ErrorControl== null) {
  this.isError = true;
 }
 else {
  this.isError = false;
  this.stepper.next();
 }
}

【讨论】：