Angular 带子窗体组件的角度父窗体，如何让子窗体知道何时提交父窗体？

我以这种方式将父窗体与子组件窗体一起使用

如何让子组件知道父窗体何时已提交？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>

---

选项1
使用

@ViewChild

获取子组件引用并运行其方法

范例

//子组件
当已提交RentForm时运行此（父窗体：FormGroup）{
parentForm.addControl（'address'，新FormControl（Validators.required））；
parentForm.addControl（'city'，新的FormControl（Validators.required））；
}

选项2

使用
@Input
作为可观察项，并在子组件中订阅

范例

//父组件
父型：FormGroup；
parentFormSubject$=新主题（）；
parentFormObservable$=this.parentFormSubject$.asobbservable（）；
onSubmit（）{
this.parentFormSubject$.next（this.parentForm）；
}
//确保完成“可观察”以避免内存泄漏
恩贡德斯特罗（）{
this.parentFormSubject$.next（）；
此.parentFormSubject$.complete（）；
}




选项3

正如@chellappan所解释的，
formGroup
不可能，因为它不包含此类事件或属性

您可以做的是再创建一个专门用于提交事件的
@Input
，这是一个有点老套的解决方案

范例

//子组件
@Input（）父窗体：FormGroup；
@Output（）parentFormSubmittedChange=新事件发射器（）；
@Input（）设置parentFormSubmitted（isSubmitted:boolean）{
如果（提交）{
console.log（this.parentForm）；
设置超时（（）=>{
this.parentFormSubmittedChange.next（false）；
});
}
}


选项1

使用
@ViewChild
获取子组件引用并运行其方法

范例

//子组件
当已提交RentForm时运行此（父窗体：FormGroup）{
parentForm.addControl（'address'，新FormControl（Validators.required））；
parentForm.addControl（'city'，新的FormControl（Validators.required））；
}




选项2

使用
@Input
作为可观察项，并在子组件中订阅

范例

//父组件
父型：FormGroup；
parentFormSubject$=新Subject（）；
parentFormObservable$=this.parentFormSubject$.asobbservable（）；
onSubmit（）{
this.parentFormSubject$.next（this.parentForm）；
}
//确保完成“可观察”以避免内存泄漏
恩贡德斯特罗（）{
this.parentFormSubject$.next（）；
此.parentFormSubject$.complete（）；
}




选项3

正如@chellappan所解释的，
formGroup
不可能，因为它不包含此类事件或属性

您可以做的是再创建一个专门用于提交事件的
@Input
，这是一个有点老套的解决方案

范例

//子组件
@Input（）父窗体：FormGroup；
@Output（）parentFormSubmittedChange=新事件发射器（）；
@Input（）设置parentFormSubmitted（isSubmitted:boolean）{
如果（提交）{
console.log（this.parentForm）；
设置超时（（）=>{
this.parentFormSubmittedChange.next（false）；
});
}
}


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

子组件.ts

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

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

子组件.ts

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

我希望不要使用它；可能在子对象中使用parentForm变量，因为它在那里，但是这可以作为一个选项，将继续查找，thanks@mattsmith5答案已更新，又添加了一个选项快速问题，我是否可以将Getters Setters方法与@Input（）parentForm:FormGroup；，如何在这里检查NgOnsubmit？可能吗？谢谢@mattsmith5回答更新我不希望使用它；可能在子对象中使用parentForm变量，因为它在那里，但是这可以作为一个选项，将继续查找，thanks@mattsmith5答案已更新，又添加了一个选项快速问题，我是否可以将Getters Setters方法与@Input（）parentForm:FormGroup；，如何在这里检查NgOnsubmit？可能吗？谢谢@mattsmith5回答更新的快速问题，我是否可以将getters setters方法与@Input（）parentForm:FormGroup；，如何在这里检查NgOnsubmit？可能吗？谢谢不可能。FormGroup类没有submitted属性和ngOnSubmit事件，FormGroupDirective只有这些onSumit事件和submitted Events问题，我还可以将getters setters方法与@Input（）parentForm:FormGroup；一起使用吗；，如何在这里检查NgOnsubmit？可能吗？谢谢不可能。FormGroup类没有Submited属性和ngOnSubmit事件，FormGroupDirective只有这些onSumit事件和Submited事件