How can i prevent page reload on form submit angular 7

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.

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