指向嵌套 FormGroup 的变量

Question

令我惊讶的是，我没有遇到询问如何指向嵌套在另一个 FormGroup 中的 FormGroup 的问题。当您继续以这种方式引用嵌套表单组以访问其中的对象时，它会变得既麻烦又乏味。

<FromGroup>.controls['FormGroupName'].controls['FormGroupName]...etc.

有没有办法指向 typescript 文件中的嵌套表单组，然后使用该新变量代替它令人讨厌的替代方法？

我试过以下方法：

parentForm: FormGroup;
nestedForm: FormGroup;
...
// 1. 
nestedForm = this.parentForm.get('nestedFormName')
// 2. 
nestedForm = this.parentForm.controls['nestedFormName']

上面的两个例子都不起作用，因为它returns关于 AbstractControls 的错误。

Answer 1

我的解决方案范围仅限于打字稿。查看网络和 angular 网站上的其他示例，它说明了使用 'formGroupName' 来引用 HTML 中处理嵌套 formGroup 控件的区域。

Answer 2

'AbstractControl' cannot be assigned to type 'FormGroup'. Property 'controls' is missing from type 'AbstractControl'. I was under the impression that FormGroup, FormControls, and FormArray are all Abstract controls.

这意味着 TypeScript 不同意将 this.parentForm.get('nestedFormName') 返回的值赋给 FormGroup 类型的变量。原因在错误中说明：由于 the method return type is AbstractControl，TypeScript 不可能知道实际返回的是 FormGroup。它可以是一个 FormGroup。但它也可以是其他东西（例如 FormControl 或 FormArray）。你知道这一点，但编译器不知道。所以你必须使用类型断言告诉编译器你知道返回的 AbstractControl 确实是 FormGroup:

nestedForm = this.parentForm.get('nestedFormName') as FormGroup;

举一个更简单的例子，假设你有一个 FruitBasket class，你要求它在篮子的某个位置获取 Fruit。

你当然可以这样做：

const fruit: Fruit = basket.get(i);

但你不能那样做:

const banana: Banana = basket.get(i);

因为 TypeScript 不知道位置 i 的水果是香蕉、苹果还是梨。它可能是其中任何一个。所以，如果你知道香蕉在位置 i，那么你需要告诉 TypeScript：

const banana: Banana = basket.get(i) as Banana;

指向嵌套 FormGroup 的变量

Variable pointing to nested FormGroup

angular

formgroups