when i submit a from whose button is in another co

问题:

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>

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

here is my submit service:

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

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>

here is the function where submitting the form

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

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

回答1:

You need to unsubscribe from 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();
}

回答2:

Modify the button to remove the (click) since by default behaviour it will submit the form. -

<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>

When you click this button, editInformationFunction($event) will be called since it is the submit event in the form declaration.

__ Update __

You can also remove the (submit) call from form declaration and keep it -

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

And change the button. Remove the type="submit" and keep just (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>

The idea is that you submit the form only once.

If this does not work, then try modifying the button to input with type='button'.