1

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

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

有没有办法指向打字稿文件中的嵌套表单组，然后使用该新变量代替它令人眼花缭乱的替代品？

我尝试了以下方法：

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

上面的两个示例都不起作用，因为它返回了关于 AbstractControls 的错误。

4

2 回答 2

1

“AbstractControl”不能分配给“FormGroup”类型。“AbstractControl”类型缺少属性“控件”。我的印象是 FormGroup、FormControls 和 FormArray 都是抽象控件。

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

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

举一个更简单的例子，假设你有一个 FruitBasket 类，你要求它在篮子的某个位置获取 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;
于 2018-04-01T13:31:43.343 回答
1

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

于 2018-04-01T13:06:54.727 回答