Angular Reactive Forms 是一种可扩展的表单处理方式，它提供了许多特性，包括响应式、强类型的结构、表单校验和表单数据处理等功能。本文将详细介绍 Angular Reactive Forms 的使用方法，并提供示例代码。
Reactive Forms 概述
Angular Reactive Forms 是 Angular 提供的优化表单验证和数据绑定的方式，它基于观察者模式，使用响应式编程方式建立表单。
相比较于 Angular Template Driven Forms，Reactive Forms 优点在于：
- 可以进行更复杂的表单控件的验证和交互；
- 可以对表单重复使用以及组合；
- 提供比较严谨的编程接口，对程序员的能力要求相对较高。
Reactive Forms 安装
使用 Reactive Forms，需要从 @angular/forms 中引入 ReactiveFormsModule。可以使用以下命令安装 Reactive Forms：
npm install @angular/forms --save
Reactive Forms 基础用法
使用 Reactive Forms 的第一步，需要在组件中引入 ReactiveFormsModule，并使用 FormGroup 和 FormControl 进行表单构建。
Angular FormGroup
FormGroup 是一个表单组的容器，可以为一个或多个 FormControl 提供管理和校验的能力。以下为一个创建 FormGroup 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
------ ----------- ---------------------- --
------- ------------- -------------------------
------
---------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
----- --- ----------------
---
-
-在组件的构造函数中，我们可以通过 new FormGroup() 来创建一个表单组。
Angular FormControl
FormControl 表示单个表单控件，它包含表单控件的值和状态。以下为一个创建 FormControl 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
------
-----------
----------------------
-----------------------------------------------
--
----- ------------- ----------------------------------
-- --------------------------------- --
-------
------- ------------- -------------------------
------
---------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
----- --- --------------- ---------------------
---
-
-在组件的构造函数中，我们可以通过 new FormControl() 来创建一个表单控件。通过在表单控件中传入 Validators.required，就可以验证输入框是否为空。通过 form.controls.name.invalid 来判断表单控件是否有错误，form.controls.name.errors.message 来获取错误信息。
以上代码展示了一个简单的表单控件验证例子。
获取表单值
在 Angular Reactive Forms 中，我们可以通过 FormGroup.value 属性来获取表单的提交值。如下为这个例子的提交表单内容：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
------- ---------- - ---- --------
----- -------------------
------
-----------
----------------------
-----------------------------------------------
--
----- ------------- ----------------------------------
-- --------------------------------- --
-------
------- ------------- -------------------------
------
---------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
----- --- --------------- ---------------------
---
-
-Reactive Forms 进阶用法
对于一个复杂的表单，使用 FormGroup 和 FormControl 的方式会显得繁琐，因此 Angular Reactive Forms 提供了更加高级的用法：
Angular FormArray
FormArray 表示一组表单控件，它与 FormGroup 相似，只是 FormGroup 提供单独的控件，而 FormArray 提供多个控件。
以下为创建 FormArray 的例子：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ --------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
---- -----------------------
---- ----------- ----- -- ---------------- --- - - -------
------ ----------- --------------------- --
------- ------------- -------------------------
------
---------
------
------- ------------- ------------------------ --------------
------
------- -----------------------------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
------- --- --------------
---
-
--- -------- -
------ ----------------------- -- ----------
-
---------- -
-------------------- -----------------
-
-------------- ------- -
------------------------
-
-表单校验
Angular Reactive Forms 提供了一系列的校验器，用于表单的验证和校验规则制定。可以使用 Validators 来选择性地把控件应用到 FormControl 和 FormGroup：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
------
------------
-----------------------
------------------------------------------------
--
----- ------------- -----------------------------------
-- ---------------------------------- --
-------
------- ------------- -------------------------
------
---------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
------ --- --------------- -
--------------------
-----------------
---
---
-
-可以使用 Validators.required 或 Validators.email 来在控件之间做出选择，并使用 FormGroup.errors 属性来获取 FormGroup 的错误。您还可以使用自定义验证器来在自定义验证逻辑中包装值和其它验证规则。
FormControl.valueChanges 属性
FormControl.valueChanges 属性是一个可以订阅的 Observable，会通过提供对比值来发出当前 FormControl 的值变更。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------
------
------------
-----------------------
------------------------------------------------
--
----- ------------- -----------------------------------
-- ---------------------------------- --
-------
--- --
---------- -------------------------- - -------------------
-------
--
--
------ ----- ------------- -
----- ----------
------------- -
--------- - --- -----------
------ --- --------------- -
--------------------
-----------------
---
---
-
-在以上例子中，您可以看到 FormControl.valueChanges 属性是如何使用的，每当 FormControl 的值发生变化时，会触发 app-draft 组件的重绘。这是一种高度动态和交互的反应式编程方式。
总结
Angular Reactive Forms 提供了强大和可扩展的表单数据处理和校验能力，对于一个复杂的表单和数据流程，Reactive Forms 是一个非常好的选择。在本文中，我们对 Angular Reactive Forms 的基础和进阶用法进行了介绍，并提供了样例代码。保证您可以开始充分利用 Reactive Forms 来处理您的表单。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6458a9b0968c7c53b0afe5fa