如何构建一个强类型的Angular 14超级表单

通过你的数据模型强制执行表单控制类型

在Angular 14中创建你的第一个超级表单 (📷:Admec)

"类型化表单确保表单控件、组和数组内的值在整个API表面上是类型安全的。这使得表单更加安全，特别是对于深度嵌套的复杂情况。" - Angular博客

随着Angular 14FormControls 和FormGroups 现在是强类型的。

强类型的表单示例

注意上面的例子，我们可以直接通过addShirtToCartRequested 来发射this.formGroup.getRawValue() 的值，因为返回值的类型与我们的Item<Shirt> 接口匹配。在Angular表单中加入强类型，可以让我们更快写出代码，减少bug。

此外，编辑器现在可以为我们的表单的value 属性提供类型先导建议。

使用Angular 14表单的类型先导建议

当我们访问一个不存在的属性或以与类型定义冲突的方式使用一个属性时，类型安全的表单值将导致编译器发出错误。

在我们上面的例子中，有一块是缺失的。如果我们想在声明formGroup 时强制要求formGroup 与Item<Shirt> 接口相匹配，会怎么样？

哎呀!我们忘了一个FormControl!

如果我们能够在声明时明确地输入formGroup 来匹配我们的Item<Shirt> 接口，那不是很好吗？不用担心，超级表单就在这里!

超级表单是一个特制的术语，用来描述一个与数据模型的接口相匹配的表单组接口。感谢Netanel Basel的这个'Bonus'片段，在Angular 14中键入表单的输入和输出可以通过引入一个灵巧的ControlsOf 类型来完成。

用于表单组声明的ControlsOf类型

现在你可以在声明时强制执行formGroup 的类型，并通过像这样使用ControlsOf 赋予你的FormGroup 超级权力。

超级表单实现

现在，如果你忘记在formGroup 中包含一个属性，你会在声明时得到一个错误。下面是这个错误可能出现的情况。

声明时的错误

一个演示Angular 14超级表单的完整例子可以在下面的嵌入式Stack Blitz中找到。

堆栈闪电战超级表单示例

如果你想了解更多关于Angular 14类型表单的信息，请看Angular 14发布的博文。祝您好运!

Want to connect?