Angular 中 UntypedFormGroup和FormGroup的区别？

金木讲编程2024-11-03 10:55

在 Angular 中，UntypedFormGroup 和 FormGroup 的主要区别在于类型检查。

1、FormGroup：这是 Angular 表单模块中常用的类型化版本。它允许我们在表单控件中使用类型检查，即每个控件的类型在编译时就会被检查，这对于严格类型的应用程序来说是有帮助的。在代码中使用 FormGroup 时，表单结构的类型会被明确指定，这可以防止输入错误，并提高代码的可靠性。

clike 复制代码

import { FormGroup, FormControl } from '@angular/forms';

const form = new FormGroup({
  name: new FormControl(''),
  age: new FormControl(0),
});

form.get('name')?.value; // TypeScript 知道这个值是字符串类型
form.get('age')?.value;  // TypeScript 知道这个值是数字类型

2、UntypedFormGroup：这是 Angular 14 引入的一个新的版本，允许创建一个没有类型检查的 FormGroup。当我们不希望在编译时进行类型检查，或者表单结构动态变化、类型不确定时，可以使用 UntypedFormGroup。它不会对控件的类型进行任何约束，适合快速开发或动态表单结构的场景。

示例：

clike 复制代码

import { UntypedFormGroup, UntypedFormControl } from '@angular/forms';

const form = new UntypedFormGroup({
  name: new UntypedFormControl(''),
  age: new UntypedFormControl(0),
});

form.get('name')?.value; // TypeScript 将值视为 any 类型
form.get('age')?.value;  // TypeScript 将值视为 any 类型

使用建议

FormGroup：适合结构确定、需要类型检查的表单。

UntypedFormGroup：适合结构动态变化或不需要类型约束的表单。