前言： Angular 是一种用于构建 Web 应用程序的平台，而表单（Form）则是 Web 应用中至关重要的一部分，关乎着用户登录、注册等等的功能。在 Angular 中，表单和 FormGroup 是常用的概念和组件，在本文中将对这两个概念进行详细的介绍及使用方法。
什么是表单 (Form)？
表单（Form）是一种用于收集和提交用户信息的区域，通常包含输入框、下拉选择器、单选框、复选框等控件。在 Angular 中，表单可以用 ngForm 指令进行定义，并在组件中进行数据管理。
什么是 FormGroup？
FormGroup 可以看作是表单的控制器，对表单进行初始化、校验、提交等操作。FormGroup 与 FormControl、FormBuilder 等概念紧密相连。
FormGroup 的创建
FormGroup 可以通过手动创建也可以通过 FormBuilder 快速创建。
手动创建 FormGroup
在组件中，可以通过代码手动创建一个 FormGroup 实例，总体过程如下：
- 导入
FormGroup类：
import { FormGroup } from '@angular/forms';- 创建一个自定义的 FormGroup 实例：
myForm = new FormGroup({
name: new FormControl(),
email: new FormControl(),
age: new FormControl()
});- 在模板中绑定 FormGroup 实例：
-- -------------------- ---- ------- ----- --------------------- -------------------- ------ ----------- ----------------------- ---- --------------------- ------ ------------ ------------------------ ---- ------------------- ------ ------------- ---------------------- -------
使用 FormBuilder 创建 FormGroup
在组件中，可以使用 FormBuilder 快速创建一个 FormGroup，总体过程如下：
- 导入
FormGroup类、FormBuilder类：
import { FormGroup, FormBuilder } from '@angular/forms';- 在构造函数中注入 FormBuilder：
constructor(private formBuilder: FormBuilder) {}- 在组件中使用 FormBuilder 创建 FormGroup，代码示例如下：
myForm = this.formBuilder.group({
name: '',
email: '',
age: ''
});- 在模板中绑定 FormGroup 实例：
-- -------------------- ---- ------- ----- --------------------- -------------------- ------ ----------- ----------------------- ---- --------------------- ------ ------------ ------------------------ ---- ------------------- ------ ------------- ---------------------- -------
FormGroup 的校验
FormGroup 可以通过代码的方式设置校验规则，并在模板中进行展示。下面我们通过一个示例，来演示如何对 FormGroup 进行校验。
- 导入
Validators，它是一个包含各种校验规则的类：
import { FormGroup, FormBuilder, Validators } from '@angular/forms';- 在使用 FormBuilder 创建 FormGroup 时，设置校验规则：
myForm = this.formBuilder.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
age: ['', Validators.min(0)]
});在上面的示例中，校验规则包含了必填、电子邮件格式、数值最小值等，校验结果会在这个 FormGroup 的控制器中进行存储。
- 在模板中展示校验结果。
-- -------------------- ---- -------
----- -------------------- ------------------------
-----
------ ------------------------
------ ----------- --------- -----------------------
---- ----------------------------------- -- --------------------------- -- -------------------------------
---- ------------------------------------------------- -- --------------
------
------
-----
------ --------------------------
------ ------------ ---------- ------------------------
---- ------------------------------------ -- ---------------------------- -- --------------------------------
---- --------------------------------------------------- -- --------------
---- ------------------------------------------------- ----- - ----- ----- -------------
------
------
-----
------ ----------------------
------ ------------- -------- ----------------------
---- ---------------------------------- -- -------------------------- -- ------------------------------
---- ------------------------------------------ ---- -- ------- ---- -------
------
------
------- -----------------------------
-------如上代码，通过 ngIf 做了一个简单的判断展示校验结果，方便用户了解校验结果。
总结
本文介绍了 Angular 中的表单 (Form) 与 FormGroup 的概念及使用方法，包括手动创建 FormGroup 和使用 FormBuilder 创建 FormGroup；对 FormGroup 的校验也进行了一些简单的展示。相信本文对于初学 Angular 的开发者有所帮助，让你更好地理解 Angular 中的表单和 FormGroup 的作用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646d6528968c7c53b0c14f29