How can i prevent page reload on form submit angular 7

Question

I am not familiar with Angular .Am facing a problem with submit button .When i click on button where type is submit it is reloading the complete page .Instead of calling my service API.

Even i added (keydown.enter)="$event.preventDefault()" on form tag and in Button click method also i tried with event.preventDefault() . But didn't worked.

Please check my below code

<form  #createForm="ngForm" class="login-form text-center" (ngSubmit)="Update()" (keydown.enter)="$event.preventDefault()">
       <table cellpadding="5" class="mx-auto">
          <tr>
            <td>
              <label class="white pr-2" for="email" autofocus>Email</label>
            </td>
            <td>
              <input name="email" id="email" type="text" [(ngModel)]="email" required  #name="ngModel"class="d-inline-block w-100" >
            </td>
          </tr>

          <tr>
            <td></td>
            <td class="text-left">

                <button class="d-inline-block text-left lh-100" id="login" type="submit"  [disabled]="!createForm.form.valid">Change Password
                 </button>&nbsp;
                 <button class="float-right lh-100" style="background-color:grey" [routerLink]="'/login'" >Back to Login</button>

             </td>
          </tr>
        </table>
      </form>

Here is my .ts code . button update method

Update()
  {

   this.userservice.changePassword(this.email).pipe(first())
    .subscribe(
        data => 
        {
            if(!data.message)
            {
              this.errorMsg = data.message;
            }
           else 
            {
              this.errorMsg = data.message;
            }
        },
        error => {
          this.errorMsg = error.Message;
        });

  }

Here is the service code

 changePassword(EmailId: string) {

        return  this.http.get<Validations>(`${environment.apiUrl}/User/SendMail?userName=` + EmailId+`&subject=`+''+`&message=`+''+`&mailType=`+'changepassword');
    }

app.module.ts File

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { GridModule } from '@progress/kendo-angular-grid';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

import { LoginComponent } from './common/login/login.component';
import { ForgotPwdComponent } from './common/forgotPwd/forgotPwd.component';
import { BlankComponent } from './common/blank/blank.component';
import { ResetComponent } from './common/reset/reset.component';





@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    ForgotPwdComponent,
    ResetComponent,
    BlankComponent,


  ],
  imports: [
    BrowserModule,

    FormsModule,
    AppRoutingModule,
    GridModule,
    BrowserAnimationsModule,
    HttpClientModule,


  ],

please suggest how can i prevent page reload after submit button and execute my service call.

score 27 · Accepted Answer · edited Jul 26 '22 at 06:57

27

If there is an error in onSubmit then it will get refreshed. So make sure you have imported FormsModule and ReactiveFormsModule from @angular/forms in your respective module.ts or in app.module.ts

app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms';

import { AppComponent }  from './app.component';
import { HeroFormComponent } from './hero-form/hero-form.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
  ],
  declarations: [
    AppComponent,
    HeroFormComponent
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }

edited Jul 26 '22 at 06:57

Ruina

401
2
12

answered Jun 12 '19 at 13:00

Sarjerao Ghadage

1,420
16
31

Ya i have imported import { FormsModule } from '@angular/forms'; in app.module.ts – Karthik Jun 12 '19 at 13:07
can u share your app.module.ts ?? – Sarjerao Ghadage Jun 12 '19 at 13:11
also check for ReactiveFormsModule is imported or not if not the import it – Sarjerao Ghadage Jun 12 '19 at 13:18
you missed ReactiveFormsModule please add it – Sarjerao Ghadage Jun 12 '19 at 13:20
Now Added ReactiveFormsModule and tested code but same reload problem – Karthik Jun 12 '19 at 13:20
your code is working fine I have tested here https://stackblitz.com/edit/angular-yghuby. additional for "Back To login " button set type as Button. – Sarjerao Ghadage Jun 13 '19 at 05:53
1

oK Thank you so much for the support . – Karthik Jun 13 '19 at 06:45

score 6 · Answer 2 · edited Jan 15 '21 at 08:45

6

If you add FormsModule to app.module.ts, as follows:

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
  ],
  ...
})

and restart it with ng serve (if the ng serve process is running, then stop it and run again), then this problem will be fixed.

edited Jan 15 '21 at 08:45

ib.

27,830
11
80
100

answered Jan 14 '21 at 01:04

Nourdine Essail

69
1
1

score 4 · Answer 3 · answered Aug 28 '21 at 04:37

Root cause, there is an error in form.

This could happen due to multiple reasons, here is a scenario I encountered hope it helps to someone.

In my angular 12 app

I used like

<div [formGroup]="testForm" (ngSubmit)="save()">

Instead it should be

<form [formGroup]="testForm" (ngSubmit)="save()">

score 1 · Answer 4 · answered Nov 17 '22 at 22:59

1

Return false with (submit) prevent reload.

answered Nov 17 '22 at 22:59

Leasye

261
1
8
19

score 1 · Answer 5 · answered Feb 03 '23 at 11:33

1

Change the type property of button from submit to button or any other one.

answered Feb 03 '23 at 11:33

Shafook Muhammed

11
1

score 0 · Answer 6 · answered Jun 27 '23 at 06:49

In Angular 12, it is [FormGroup] that listens to the submit event:

The FormGroup directive listens for the submit event emitted by the form element and emits an ngSubmit event that you can bind to a callback function. see doc.

So you have to have:

a [FormGroup] on your <form> element
(ngSubmit) and a component method
ReactiveFormsModule loaded
a public FormGroup property on your component class, preferably with some properties in it matching the form inputs

score 0 · Answer 7 · answered Aug 09 '23 at 07:12

make sure to use (ngSubmit)="signIn()" directly from the openning form tag instead of submitting through a button or an href tag...find my own example below..this might help someone

if you use button if will reload the page after failed submission.

                <form
                [formGroup]="signInForm"
                #signInNgForm="ngForm"
                (ngSubmit)="Update()">

How can i prevent page reload on form submit angular 7

7 Answers7