当我提交一个按钮在另一个组件中的 from 时，它提交了几次

Question

我有带有输入字段的“编辑信息”组件。
这是它的 HTML：

<form class="form form-validate" ngNativeValidate 
  (submit)="editInformationFunction($event)"
  #editForm="ngForm">
    <div class="row px-3 pb-3">

      <!---------------Panel1 ------------------->
      <div class="panel panel-primary radius">
        <div class="panel-heading border-bottom p-2">
          <h3 class="panel-title m-0"><i class="fa fa-user green pl-3"> </i> <span
          class="ml-2 font-weight-bold">PERSONAL INFORMATION</span>            
          </h3>
          <span class="pull-right "><i class="glyphicon glyphicon-chevron-down"> </i></span>
        </div>
      </div>
      <div class="panel-body">

        <div class="row">

          <!--input fields-->

          <div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6">
            <div class="form-group mt-4 ml-4">
              <label for="name"><b>NAME<span class="text-danger ml-2">*</span> </b></label>
              <input id="name" type="text" class="form-control"
                     [(ngModel)]="editInformationModel.name"
                     [ngModelOptions]="{standalone: true}" required>
            </div>
          </div>

          <div class="col-xs-12 col-sm-12 col-md-12 col-md-6 col-lg-6">
            <div class="form-group mt-4 mr-4">
              <label for="info"><b>BIRTH DATE
              </b></label>
              <input id="info" type="month" max="{{currentDate}}" 
               class="form-control"
                     [(ngModel)]="editInformationModel.birth_date"
                     [ngModelOptions]="{standalone: true}">
            </div>
          </div>
    </form>

这是我获取服务的 Ts 文件

ngOnInit() {
  this.submitService.onFormSubmit().subscribe((submitting) => {
    console.log("edit information");
    if (submitting) {
      console.log("edit information2");
      this.editInformationFunction();
    }
  });
}

这是我的提交服务：

export class SubmitService {

  private submitSubject = new Subject<any>();

  constructor() {
    // this.submitSubject = new Subject<boolean>();
  }

  submitButton(submitting: boolean): void {
    console.log("service1")
    this.submitSubject.next(submitting);
  }

  onFormSubmit(): Observable<any> {
    console.log("service2")
    return this.submitSubject.asObservable();
  }
}

这是我添加按钮的html组件：​​

<button type="submit" class="btn btn-success btn-sm py-2 border-0"
    (click)="submitFunction($event)" *ngIf="userModel.fid == 
   householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1"
  ><i class="fa fa-save"> </i>
    Save Information
</button>

这里是提交表单的函数

submitFunction(e) {
  console.log("sidebar")
  this.submitService.submitButton(true);
}

我试过e.preventDefault()但不知道是什么原因多次收到成功消息。
我的代码有什么问题吗？需要帮助

Answer 1

你需要从onFormSubmit()unsubscribe

import {Subscription} from 'rxjs';

...



submitServiceSubscription: Subscription;

ngOnInit() {
    this.submitServiceSubscription = this.submitService.onFormSubmit().subscribe(
    (submitting) => {
    console.log("edit information");
    if (submitting) {
      console.log("edit information2");
      this.editInformationFunction();
     }
    }
   );

}


ngOnDestroy(){
    this.submitServiceSubscription.unsubscribe();
}

Answer 2

修改按钮以删除（单击），因为默认情况下它将提交表单。 -

<button type="submit" class="btn btn-success btn-sm py-2 border-0" *ngIf="userModel.fid == householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1">
<i class="fa fa-save"> </i>
Save Information
</button>

当您单击此按钮时，将调用 editInformationFunction($event)，因为它是 form 声明中的 submit 事件。

__ 更新 __

您还可以从 form 声明中删除 (submit) 调用并保留它 -

<form class="form form-validate" ngNativeValidate #editForm="ngForm"> ...

然后更改按钮。删除 type="submit" 并保留 (click) -

<button class="btn btn-success btn-sm py-2 border-0" 
(click)="submitFunction($event)" *ngIf="userModel.fid == householdModel.fid || householdModel.fid == '-1' || userModel.HoH == 1">
<i class="fa fa-save"> </i>
Save Information
</button>

这个想法是您只提交一次表单。

如果这不起作用，请尝试将button 修改为input 和type='button'。