FormControl / FormGroup / FormArray 值类型

Question

我希望我的 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 界面时，表单未适配且未抛出任何错误 => 存在一些错误。

Answer 1

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

现在 suggested by Daniele Morosinotto in March this year and there are talks 将其包含在 Angular 9.

采用解决方案很简单：

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

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

FormControl / FormGroup / FormArray value type