web-dev-qa-db-fra.com

Angular soumet un événement se déclenchant deux fois entre les composants parent et enfant

J'ai un problème étrange où, par le formulaire d'envoi, l'événement de mon enfant se déclenche deux fois sur mon formulaire parent.

child.component.html

<form [formGroup]="childForm" (ngSubmit)="childFormSubmit()">
  ...
</form>

child.component.ts

@Component({
  selector: 'child-form',
  templateUrl: 'login.component.html',
})

export class ChildComponent {
  @Output() submit = new EventEmitter<any>();

  public childForm: FormGroup;

  childFormSubmit() {
    if (this.childForm.valid) {
      console.log('Child Form Submit')
      this.submit.emit(this.childForm.value);
    }
  }
}

parent.component.html

<child-form (submit)="parentSubmit($event)"></child-form>

parent.component.ts

@Component({
  selector: 'parent',
  templateUrl: 'parent.component.html',
})

export class ParentComponent {

  constructor() {
  }

  parentSubmit(event: any) {
    console.log('Parent Submit');
  }
}

La soumission du formulaire enfant entraîne les résultats suivants dans la sortie de la console:

Child Form Submit
Parent Submit
Parent Submit
javascriptangularformstypescriptangular-components
16
Remotec

Vous avez utilisé un mot réservé "soumettre" sur le composant enfant comme fonction et attribut de décoration. Donc, si vous avez une fiche dans un composant parent, (submit) (ce qui équivaut à (ngSubmit)) est renvoyé en même temps que l'événement de l'enfant. Changez-le pour autre chose, comme ceci:

<child-form (childSubmit)="parentSubmit($event)"></child-form>

et dans le composant enfant:

 @Output() childSubmit = new EventEmitter<any>();
 ...
 childFormSubmit() {
   if (this.childForm.valid) {
         console.log('Child Form Submit')
         this.childSubmit.emit();
   }
 }

Voici un travail [[# #]] démo [~ # ~]

40
Vega