类型化响应式表单
使用严格类型构建表单
类型化响应式表单 是 CoddyKit 上的免费 Angular Academy 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Angular Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Angular Academy 课程共包含 4 节课。
为什么使用类型化表单？
在 Angular 14 之前，响应式表单的值会被标记为 any。类型化响应式表单提供了完整的类型安全：编译器知道表单值的结构以及各个控制项的名称。
类型化 FormControl
FormControl 是泛型类型。请提供值类型，以便检查读取和写入操作。
const name = new FormControl<string>('', {
nonNullable: true
});类型化 FormGroup
FormGroup 会根据您传入的控制项推断其值类型。
const form = new FormGroup({
email: new FormControl(''),
age: new FormControl(0)
});推断出的值类型
上面那个组的 value 类型为 { email: string | null; age: number | null }，所有内容都会在编译时进行检查。
const v = form.value; // typed automatically可空性
默认情况下，控制项可以重置为 null，因此其值类型包含 | null。请使用 nonNullable 排除 null。
new FormControl('', { nonNullable: true });
// value type: string (no null)安全访问控制项
form.controls.email 具有强类型，因此控制项名称中的拼写错误会被编译器捕获。
form.controls.email.setValue('a@b.com');get 与 controls
为了确保类型安全，优先使用 form.controls.name，而不是 form.get('name')；get 返回类型较宽松的 AbstractControl | null。
getRawValue
getRawValue() 会返回包括已禁用控制项在内的所有值，而 value 会省略已禁用的控制项。
const all = form.getRawValue();嵌套组
类型化组可以组合使用。嵌套的 FormGroup 会将自身的类型化结构添加到父级值中。
const form = new FormGroup({
user: new FormGroup({
first: new FormControl(''),
last: new FormControl('')
})
});patchValue 的类型安全
patchValue 接受表单值的部分结构；编译器会标记未知键。
form.patchValue({ email: 'x@y.com' });迁移旧版表单
为了支持渐进式迁移，Angular 提供了 UntypedFormGroup 等无类型 API。新代码应使用类型化类来确保安全。
快速检查
测试您对类型化响应式表单的理解。
回顾
您了解到，类型化响应式表单会让 FormControl/FormGroup 成为泛型，并推断出经过检查的值结构；默认值包含 | null（可使用 nonNullable 避免），而通过 controls 访问比使用 get 更安全。
常见问题解答
「类型化响应式表单」课时是免费的吗？
是的 — 「类型化响应式表单」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Angular Academy 课程的其余内容，请升级到 CoddyKit PRO。 Angular Academy 课程共包含 4 节课。
「类型化响应式表单」这节课中我会学到什么？
使用严格类型构建表单 你通过在浏览器中直接运行的动手代码来练习 Angular Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Angular Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Angular Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「类型化响应式表单」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Angular Academy 课中编写并运行代码吗？
能。每节 Angular Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。