Stepper component doesn't submit form

[crissty]

Issue type

I'm submitting a ... (check one with "x")

• [x] bug report
• [ ] feature request

Issue description

Current behavior: I am reproducing the example of stepper with validation showed in the nebular documentation, but, when the "next" button is clicked, the console show the follow warning:

Form submission canceled because the form is not connected

I added the type="button" attribute and I already don't get the warning, but the function of submit is not called. The only solution that I found, it is add the "click" event in the button to call to the submit function.

Expected behavior: The form should call to the submit function declared in the "ngSubmit" event of the "form" element when the "next" button is clicked.

Steps to reproduce: Add the stepper component with the following code (Validation example): https://akveo.github.io/nebular/docs/components/stepper/examples#nbsteppercomponent

Other information:

npm, node, OS, Browser

$ node --version
v8.11.3

$ npm --version
6.4.1

Angular, Nebular

 "@angular/cli": "6.0.0",
 "@angular/compiler-cli": "6.0.0",
 "@nebular/bootstrap": "2.0.1",
 "@nebular/theme": "2.0.1",

[Tibing]

Hi @crissty, could you please provide a reproducible stackblitz?

[IgnacioYanjari]

@Tibing Just go to page, open the dev tools and use the stepper with validations. Press the prev and next buttons and you will notice that the same message appears in the console.

[pedrotcm]

The problem still occurs on the official website itself.

[doenikoe]

I also had the same issue, my form is not submitted after I click on next button if validation passed. Here is my workaround to solve it:

import { Component, ViewChild } from '@angular/core';
import { NbStepperComponent } from "@nebular/theme"; //import this component
...

@Component({
  ...
  template: `
    <nb-stepper #stepper>
       <nb-step [stepControl]="myForm">
          <form [formGroup]="myForm" (ngSubmit)="formSubmit()" class="step-container">
            ...
            <button type="submit">next</button>  // use button type submit
          </form>
       </nb-step>
       ...
    </nb-stepper>
`
})
export class MyComponent {
   @ViewChild('stepper') stepper: NbStepperComponent;

   formSubmit() {
    // do form validation and submission here
    ...
    this.stepper.next(); // call next step
   }
}

[marellanoc]

I have the same issue. Any news?

[PGayol]

Hi! I'm facing the same issue here, and still happening in official website. Is there any news?

[Madhav-Khandal]

Hey. I am facing some issues regarding the form submission in StepperModules. I want to submit the form on the button click as well as navigate to the next page in the nbStepper. But it shows an error --- "Form submission canceled because the form is not connected".

Can anyone help me with this problem.. Here is my code --- For html file --- `

        <nb-step [label]="labelOne" [stepControl]="formOne">
            <ng-template #labelOne>Device type</ng-template>
            <form class="form-inline" #formOne="ngForm" >

                // Code goes here...

                <div class="buttonHolder">
                    <button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
                    <button nbButton outline status="primary" (ngSubmit)="onSubmit(formOne)" 
                      nbStepperNext [disabled]="!formOne.valid">Next</button>
                </div>
            </form>
        </nb-step>`

For the .ts file ----

onSubmit(form: NgForm) { console.log(form.value); form.reset(); }

[SaudAnjum]

Hi! I'm facing the same issue here, and still happening in official website. Is there any news?