nb-select on nb-stepper giving error- Form submission canceled because the form is not connected (NgxAdmin)

Question

I get an error (Form submission canceled because the form is not connected) when moving to the next step in my stepper because of the nb-select. I have a feeling that the nb-option "value" is not properly linking the the formControlName (kinda as the error says). I use FormBuilder and FormGroups. I have read up quite a bit but can't see what might be causing this.

nb-select code

<nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
            placeholder="Select a Technician">
            <nb-option *ngFor="let technician of technicianList" value="technician.id">
              {{technician.firstName}}
            </nb-option>
          </nb-select>

the form code

 <nb-step [stepControl]="createForm" label="Create">
    <form [formGroup]="createForm" (ngSubmit)="onCreatePlannedMaintenance()" class="step-container">
      <div class="row">
        <div class="col-sm-12">
          <label for="inputUser" class="label col-sm-12 form-control-label">Default Technician</label>
          <nb-select formControlName="defaultTechnicianId" *ngIf="technicianList" fullWidth="true"
            placeholder="Select a Technician">
            <nb-option *ngFor="let technician of technicianList" value="technician.id">
              {{technician.firstName}}
            </nb-option>
          </nb-select>
        </div>
      </div>
      <button nbButton nbStepperNext>next</button>
    </form>

form setup code

this.createForm = this.formBuilder.group({
  name: ['', Validators.required],
  defaultTechnicianId: ['', Validators.required],
});

Submit code

onCreatePlannedMaintenance() {
this.createForm.markAsDirty();

if (this.createForm.invalid) {
  return;
}

this.plannedMaintenance = this.createForm.value;

this.dataService.put(this.plannedMaintenance).subscribe(data => {
  this.plannedMaintenance = data;      
});

}

Answer 1

I have read that this might be an issue with the older nebular package (I am using 4.1.2). Might not be nebular itself but instead nebular and reactive forms together causing this.

Simple fix is just to add a click event on the Stepper Next Button e.g.

<button nbButton nbStepperNext (click)="onCreatePlannedMaintenance()">next</button>