Angular nb-step and nb-select validation

Question

In this code:

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

How can i validate the first nb-select before step 2 to have a value??? I would like it not to proceed to step N2 until the select of step N1 is selected...

tnx a lot

Answer 1

found a solution here

Validate form in NbStepperComponent before executing nbStepperNext

HTML

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

COMPONENT:

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