FormControl / FormGroup / FormArray 值类型答案

【问题标题】：FormControl / FormGroup / FormArray value typeFormControl / FormGroup / FormArray 值类型
【发布时间】：2017-06-09 09:51:05
【问题描述】：

我希望我的FormControl (FormGroup / FormArray) 是强类型的，所以当我有例如时

interface SomeSource {
  id: string;
  name: string;
}

然后我将其转换为例如

let form = new FormGroup<SomeSource>({
  id: new FormControl('test id'),
  name1: new FormControl('test name')
});

TypeScript 抛出了一个错误：FormGroup 上找不到 name。

同样在理想世界中，form.value 应该是 SomeSource 类型（而不是 any）。

问题是无法为任何AbstractFormControl 子级指定此泛型类型。

我认为用自己的界面覆盖FormGroup 相当容易。但是，有没有办法仅使用 Angular 来实现这一点？如果没有，是否有第三方解决方案？

动机：我想轻松重构我的SomeSource。目前我重构SomeSource接口时，表单没有适配，也没有报错=>有一些bug的空间。

【问题讨论】：

你在表单组中使用name1？
是的，因为当我有错字或重构我的SomeSource 时，我想要一个错误。这只是一个错字模拟
我不认为 Angular 表单类提供此功能，但我认为您应该能够创建自己的 TS 类并利用泛型来实现此行为。如果您需要示例，请回复。
@rrjohnson85 谢谢，我想我能应付。我只是想避免重新发明轮子......

标签： angular typescript reactive-forms

【解决方案1】：

有一个优雅的解决方案可以解决您的问题 - 利用 TypeScript 声明文件 (*.d.ts) 引入扩展标准表单类（如 AbstractControl、FormControl 等）的通用接口。它没有引入任何新功能，并且在编译后的 JavaScript 中没有足迹，但同时强制执行强类型检查。

今年 3 月 Daniele Morosinotto 的 suggested 和 there are talks 现在将其包含在 Angular 9 中。

采用该解决方案很简单：

从this gist 下载TypedForms.d.ts 并将其保存为您的项目中的src/typings.d.ts（Angular 6+ 已经知道如何使用此文件）。
只要您需要强类型验证（参见that gist 或stackblitz 中的示例），就开始使用新类型（FormGroupTyped<T>、FormControlTyped<T> 等）。

有关更多信息，请查看blog post 分析强类型表单的可用解决方案。

【讨论】：