button - 我如何防止在表单提交 Angular 7 上重新加载页面
问题描述
我不熟悉 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>
<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,
],
请建议我如何在提交按钮后防止页面重新加载并执行我的服务调用。
解决方案
如果onSubmit中有错误,那么它将被刷新。所以请确保您已从@angular/forms 中的相应 module.ts 或app.module.ts中导入 **FormsModule 和 ReactiveFormsModule **
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 { }
推荐阅读
- java - 如何制作 Android Studio 蓝牙连接应用
- python - 如何确定python中任何生成器的yield/send/return值
- python - 无法使用 Selenium Python 填写到期日期文本字段
- android - 在 android kotlin 中使用 SAF 实现 Scope 存储
- python - 在 Python 中,0 ==(1 或 0)返回 False。为什么它不返回True?
- python - Python算法在9x9网格中获取所有3x3网格
- sql-server - 需要从不包含隐藏 graph_id 列的 SQL Server Graph Table 创建视图
- sql - 你如何解释是什么让这部分代码在排序时从星期一开始
- c - “if .. else”语句不适用于捕获标志挑战
- python - 使用 Tkinter 显示 .tiff