当我提交一个按钮，该按钮位于另一个组件中时，它会提交几次 [英] when i submit a from whose button is in another component, it submits several time

问题描述

我有带有输入字段的编辑信息"组件.
这是它的HTML:

I have "edit information" component with input fields.
Here's its 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文件

here's the Ts file in which i am getting the service

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组件，其中添加了按钮:

here is my html component where button is added:

<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()，但不知道多次获得成功消息的原因是什么.
我的代码有什么问题吗?需要帮助

I have tried e.preventDefault() but don't know what is the reason of getting success message several times.
Is there anything wrong with my code? need help

推荐答案

您需要从 onFormSubmit()

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

这篇关于当我提交一个按钮，该按钮位于另一个组件中时，它会提交几次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！