如何防止表单提交时页面重新加载 angular 7

Question

我不熟悉 Angular。我正面临提交按钮的问题。当我单击提交类型的按钮时，它正在重新加载整个页面。而不是调用我的服务 API .

即使我在表单标签和按钮点击方法中添加了 (keydown.enter)="$event.preventDefault()" 我也尝试使用 event.preventDefault() 。但是没用。

请检查我下面的代码

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

这是我的 .ts 代码。按钮更新方法

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;
        });

  }

这是服务代码

 changePassword(EmailId: string) {

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

app.module.ts 文件

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,


  ],

请建议我如何防止提交按钮后重新加载页面并执行我的服务调用。

Answer 1

如果 onSubmit 中有错误，那么它会得到 refreshed.so 请确保您已导入 **FormsModule 和 ReactiveFormsModule ** 来自 @angular/forms 在您各自的 module.ts 或 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 { }

Answer 2

如果将FormsModule加到app.module.ts，如下：

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

并用ng serve重新启动它（如果ng serve进程是运行ning，然后停止它并再次运行），那么这个问题将得到解决。

Answer 3

根本原因，表单错误。

这可能由于多种原因而发生，这是我遇到的一个场景，希望它对某人有所帮助。

在我的 angular 12 应用中

我用过

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

应该是

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

如何防止表单提交时页面重新加载 angular 7

How can i prevent page reload on form submit angular 7

submit

button

reload

angular7