Как я могу предотвратить перезагрузку страницы при отправке формы 7 - PullRequest
Новая
       39

Как я могу предотвратить перезагрузку страницы при отправке формы 7

1 голос
/ 12 июня 2019

Я не знаком с 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,


  ],

, пожалуйста, подскажите, как я могу предотвратить перезагрузку страницы посленажмите кнопку Отправить и выполните мой сервисный звонок.

1 Ответ

0 голосов
/ 12 июня 2019

Если в onSubmit есть ошибка, то она будет обновлена. Поэтому убедитесь, что вы импортировали 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 { }
...