-2

I want to submit the form on the button click as well as navigate to the next page, but it shows an error : "Form submission canceled because the form is not connected".

Can anyone help me with this problem ?? I am using nebular.

This is the html code

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

This is the .ts code

    onSubmit(form: NgForm) { console.log(form.value); form.reset(); }
Oddrigue
  • 554
  • 5
  • 17
Madhav Khandal
  • 1
  • 1
  • 5
  • Hello, welcome to StackOverflow :) Please visit [Help Center](https://stackoverflow.com/help) and take the [tour](https://stackoverflow.com/tour) to see how to properly ask a question. In order to better assist you, could you provide us with the code you're working ? – Oddrigue Feb 28 '20 at 09:46
  • 1
    Does this answer your question? [Angular 2: Form submission canceled because the form is not connected](https://stackoverflow.com/questions/42531167/angular-2-form-submission-canceled-because-the-form-is-not-connected) – Akxe Feb 28 '20 at 10:14

2 Answers2

1

To change page after submitting the form try to import Router and register it in constructor(private _router: Router) in your .ts file.

At the end of onSubmit() method add this._router.navigateByUrl('/pathOfYourNextPage'); and in this way you'll make redirect throught your .ts file.

Hope that will help!

Ilija Iličić
  • 476
  • 5
  • 12
0

You can try to below way ts file

 onSubmit(formOne: NgForm) { 
   console.log(formOne.value); 
   this._router.navigate(['/navigation page link']); // navigation url link 
   formOne.reset(); 
 }

constructor(){
  private _router: Router,
}

HTML file

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

        // Code goes here...

        <div class="buttonHolder">
            <button nbButton routerLink="/dashboard" nbStepperNext>Cancel</button>
            <button nbButton type= "submit" outline status="primary"  
              nbStepperNext [disabled]="!formOne.valid">Next</button>
        </div>
    </form>
Bansi29
  • 1,053
  • 6
  • 24
  • Thanks for your feedback, but it's not working as I expected. The form got submitted but the page doesn't change. I want to change the page as well. – Madhav Khandal Feb 28 '20 at 10:21