Question

我有一个奇怪的问题，即我的子表单的表单提交事件在我的父表单上触发两次。

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

Answer 1

您在子组件上使用了保留字'submit'作为装饰器功能和属性。因此，如果您在父组件中有表单，(\w*)\(M\)（相当于(submit)）将与来自子组件的事件同时触发。将其更改为其他内容，例如：

(ngSubmit)

并在子组件中：

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

这是一个有效的 DEMO

Angular表单提交事件在父组件和子组件之间触发两次

1 个答案: