web-dev-qa-db-ja.com

Angular親コンポーネントと子コンポーネントの間でフォーム送信イベントが2回発生する

フォームによって、子フォームの送信イベントが親フォームで2回発生するという奇妙な問題があります。

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

子フォームを送信すると、コンソール出力に次のようになります。

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

子コンポーネントで予約語「submit」をデコレータ関数と属性として使用しました。したがって、親コンポーネントにフォームがある場合、(submit)（(ngSubmit)と同等）が子からのイベントと同時に発生します。次のように、別のものに変更します。

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

子コンポーネント：

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

これは動作している[〜＃〜] demo [〜＃〜]

40
Vega