angular - 带有子表单组件的Angular父表单，如何让子知道何时提交父？

Question

我以这种方式使用带有子组件表单的父表单。https://stackoverflow.com/a/59310301/15435022

当父表单提交了按钮 Ng 时，如何让子组件知道？parentForm 变量在子组件中作为变量。有没有办法，我可以将 parentFormGroup 作为事件告诉？

当子窗体知道时，我想计算一些复杂的值（不在窗体中），并将它们发送给 parentComponent。

父组件：

 ngOnInit() {
    this.parentForm = this.fb.group({
       'customerName': [null, [Validators.required]],
       'phoneNumber': [null, [Validators.required]],
    })

 <form [formGroup]="parentForm" (ngSubmit)="onSubmit()">
    <app-child [form]="parentForm"></app-child>
    <button type="submit">Purchase</button>
 </form>

子组件：

需要知道在这个组件中，parentForm是什么时候提交的。

@Input() parentForm: FormGroup;

ngOnInit() {
    this.parentForm.addControl('address', new FormControl(Validators.required));
    this.parentForm.addControl('city', new FormControl(Validators.required));
 }

标签： angulartypescriptangular-reactive-formsangular11

Answer 1

您可以在子组件内注入FormGroupDirective，然后在子组件内订阅 ngOnSubmit 事件以监听父表单提交。

child.component.ts

 constructor(private fg: FormGroupDirective){
    this.fg.ngSubmit.subscribe(()=>{
      console.log('listen submit');
    })
  }

工作示例