How can i prevent page reload on form submit angular 7

user_10512544 0
Viewed 16355

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.

angular7 reload submit button
3 Answers

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 { }
user_48417880

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.

user_100843880

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()">
user_39664580
Related