Javascript 提交登录表单后，用户被重定向到帐户页面，表单在页面加载之前在account页面上提交。角度10

这是一个边缘的情况，但它让我感到不安，它发生了，所以我想修复它

用例：

用户登录到帐户->用户被重定向到帐户页面->用户尝试更改密码。->注销->用户再次登录->用户被重定向到帐户页面

当用户第二次被重定向到帐户页面时，

onSubmit（）

被称为向后端发送

put

请求。除了使用表单上的

（ngSubmit）=“onSubmit（）

进行表单提交外，帐户页面中没有其他地方调用了

onSubmit（）

以下是控制台的外观：

页面加载时会多次调用

this.customerService.updateCustomer（）

我想知道的是，为什么auth-component.ts中的

ngSubmit

事件会在另一个组件中调用？如何防止这种情况发生？使用

FormsModule

在此处更改为模板驱动的方法是否会解决此问题？我希望避免这种情况，但如果必须更改，我会这样做

我已经尝试过的事情：

我已经尝试过更改方法名称。auth-component.ts中的

onSubmit（form:NgForm）

引入了一个参数，而user-profile.component.ts中的

onSubmit（）

没有引入参数，因此我不认为方法的名称是这里的问题

我尝试在user-profile.component.ts上的submit按钮上添加一个click listener，但没有成功

auth-component.html：

<form #form="ngForm" (ngSubmit)="onSubmit(form)" *ngIf="!isLoading">
     <div class="form-group" *ngIf="!isLoginMode">
           <label for="name">Name</label>
           <input type="text" class="form-control" ngModel name="name" required>
     </div>
     <div class="form-group">
           <label for="email">Email</label>
           <input type="email" class="form-control" ngModel name="email" required email>
     </div>
     <div class="form-group">
           <label for="passwowrd">Password</label>
           <input type="password" class="form-control" ngModel name="password" required minlength="6">
     </div>
     <div>
           <button class="btn btn-primary" type="submit" [disabled]="!form.valid">{{ isLoginMode ? 'Login' : 'Sign Up'}}</button> |
           <button class="btn btn-primary" (click)="onSwitchMode()" type="button">{{ isLoginMode ? 'Switch to Sign Up' : 'Switch to Login'}}</button>
     </div>
     <div class="row" *ngIf="isLoginMode">
           <div class="col mt-3">
                 <a class="text-reset" [routerLink]="['/reset-password']">Forgot your password?</a>
           </div>
     </div>
</form>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Email</label>
    <div class="col">
        <input type="email" class="form-control" name="email" formControlName="email">
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Name</label>
    <div class="col">
        <input type="text" class="form-control" name="name" formControlName="name">
    </div>
  </div>
  <div class="form-group row">
    <label for="newpassword" class="col-md-3 col-xs-12 col-form-label">Current Password</label>
    <div class="col">
        <input type="password" class="form-control" name="password" formControlName="password">
    </div>
  </div>
  <hr>
  <div class="form-group row">
    <label for="newpassword" class="col-md-3 col-xs-12 col-form-label">New Password</label>
    <div class="col">
        <input type="password" class="form-control" name="newPassword" formControlName="newPassword">
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Confirm Password</label>
    <div class="col">
        <input type="password" class="form-control" name="confirmPassword" formControlName="confirmPassword">
    </div>
  </div>
  <button type="submit" class="btn btn-primary btn-block" [disabled]="!form.valid">Update Profile</button>
</form>

user-profile.component.html：

<form #form="ngForm" (ngSubmit)="onSubmit(form)" *ngIf="!isLoading">
     <div class="form-group" *ngIf="!isLoginMode">
           <label for="name">Name</label>
           <input type="text" class="form-control" ngModel name="name" required>
     </div>
     <div class="form-group">
           <label for="email">Email</label>
           <input type="email" class="form-control" ngModel name="email" required email>
     </div>
     <div class="form-group">
           <label for="passwowrd">Password</label>
           <input type="password" class="form-control" ngModel name="password" required minlength="6">
     </div>
     <div>
           <button class="btn btn-primary" type="submit" [disabled]="!form.valid">{{ isLoginMode ? 'Login' : 'Sign Up'}}</button> |
           <button class="btn btn-primary" (click)="onSwitchMode()" type="button">{{ isLoginMode ? 'Switch to Sign Up' : 'Switch to Login'}}</button>
     </div>
     <div class="row" *ngIf="isLoginMode">
           <div class="col mt-3">
                 <a class="text-reset" [routerLink]="['/reset-password']">Forgot your password?</a>
           </div>
     </div>
</form>

<form [formGroup]="form" (ngSubmit)="onSubmit()">
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Email</label>
    <div class="col">
        <input type="email" class="form-control" name="email" formControlName="email">
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Name</label>
    <div class="col">
        <input type="text" class="form-control" name="name" formControlName="name">
    </div>
  </div>
  <div class="form-group row">
    <label for="newpassword" class="col-md-3 col-xs-12 col-form-label">Current Password</label>
    <div class="col">
        <input type="password" class="form-control" name="password" formControlName="password">
    </div>
  </div>
  <hr>
  <div class="form-group row">
    <label for="newpassword" class="col-md-3 col-xs-12 col-form-label">New Password</label>
    <div class="col">
        <input type="password" class="form-control" name="newPassword" formControlName="newPassword">
    </div>
  </div>
  <div class="form-group row">
    <label for="email" class="col-md-3 col-xs-12 col-form-label">Confirm Password</label>
    <div class="col">
        <input type="password" class="form-control" name="confirmPassword" formControlName="confirmPassword">
    </div>
  </div>
  <button type="submit" class="btn btn-primary btn-block" [disabled]="!form.valid">Update Profile</button>
</form>