如何在模板中从 AbstractControl 类型转换为 FormGroup？

Question

我有一个将 FormGroup 作为 @Input 的组件。

父组件：

parentGroup = fb.group({
  childGroup: fb.group({
     nestedControl: fb.control([])
  })
})
<app-my-component [formGroup]="myGroup">

然后在子组件中我有：

@Input formGroup: FormGroup
<div *ngIf="formGroup.controls.childGroup.controls.nestedControl === true">
   some content
</div>

我收到一个错误

error TS2339: Property 'controls' does not exist on type 'AbstractControl'.

我猜子控件不知道formGroup输入的结构。如何在模板中将 AbstractControl 类型转换为 FormGroup？我想我可以制作一个在 .ts 文件和 returns formGroup 中强制转换的函数，但这看起来很麻烦。有什么办法可以在模板中做到这一点？还有其他聪明的解决方案吗？ :)

Answer 1

在 child 组件中，该错误实际上指向您的嵌套组。 Angular 不知道 childGroup 是一个 FormGroup。我不明白为什么你不能只发送 child 嵌套的 FormGroup 而不是整个表单。首先，您的代码在模板中变得更短，因为您不需要向下遍历，其次，该错误得到修复，因为您可以键入 childGroup 是一个 FormGroup :)

parent:

<app-my-component [formGroup]="myGroup.get('childGroup')">

和child:

@Input() formGroup: FormGroup;

<div *ngIf="formGroup.get('nestedControl') === true">
   some content
</div>

注意我也用了get。我更喜欢我自己:)

编辑：如果您需要传递 parent 表单组，您可以像我们在 JS objects 中使用的那样访问嵌套属性，即使用 .:

<div *ngIf="formGroup.get('childGroup.nestedControl').value === true">

如何在模板中从 AbstractControl 类型转换为 FormGroup？

How to typecast from AbstractControl to FormGroup in template?

angular

angular-reactive-forms