在 Angular 应用开发中，表单是一个很重要的部分。为了方便表单的管理和校验，Angular 提供了两种表单风格：模板驱动表单（Template-driven Forms）和响应式表单（Reactive Forms）。相比于模板驱动表单，响应式表单对于表单的复杂性和可维护性更加友好，也更推荐使用。
本篇文章将详细介绍如何使用 Angular 7 中的响应式表单构建表单，同时提供示例代码，帮助读者更好地理解和学习。
Reactive Forms 介绍
响应式表单是 Angular 中的一个特性。使用响应式表单时，表单的所有状态都可以通过一个可观察对象（Observable）来表示，这个可观察对象可以监听表单的状态并响应表单变化。因此，它对表单的交互、校验和提交有很大的灵活性和可定制性。响应式表单提供了 FormBuilder 和 FormGroup 来帮助开发者创建表单以及管理表单状态。
Form Builder 和 Form Group
在响应式表单中，FormBuilder 是用来构建表单的工具，而 FormGroup 是用来管理表单状态的对象。下面是创建一个表单并使用 FormGroup 来管理表单状态的示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
--------- ----------
------------------- --- ------------ - -
---------- -
------------- - ---------------
----- ---- --------------------- --------------------------
------ ---- --------------------- -------------------
--------- ---- --------------------- --------------------------
---------------- ---- ---------------------
-- - ---------- --------------------------- ---
-
---------- -
---------------------------------
-
-------------------------- ----------- - ----- -------- ------- - -
------ ------------------------ --- ------------------------------- - ---- - - ------------------- ---- --
-
-在上面的代码中，userForm 是一个 FormGroup 实例，它管理着表单的所有状态。FormBuilder 用来构建表单，并且可以设置表单状态的默认值、校验器、异步校验器等。在构建表单时还可以使用 Validators 来设置表单项的校验器。
同时，我们还可以自定义校验器来校验两个输入框的值是否相等。自定义校验器需要接收一个 FormGroup 参数，并在内部编写校验逻辑。在上面的示例代码中，我们编写了一个 passwordMatchValidator 函数，用来校验两个输入框的值是否相等。如果校验通过则返回 null，否则返回一个 passwordMismatch 属性表示校验不通过。
在表单提交后，我们可以通过 userForm.value 来获取表单的数据并进行提交操作。
表单控件
在响应式表单中，表单控件也是很重要的一部分。表单控件可以是输入框、下拉框、单选框、复选框等常见的表单元素。使用 Angular 中的响应式表单时，我们可以通过 FormBuilder 来创建表单控件，并设置它们的默认值、校验器等。
下面是一个简单的示例，展示如何创建一个输入框的表单控件：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- ----------------
------------ -----------------------------
---------- -----------------------------
--
------ ----- ----------------- ---------- ------ -
--------- ----------
------------------- --- ------------ - -
---------- -
------------- - ---------------
----- ---- --------------------- --------------------------
------ ---- --------------------- -------------------
--------- ---- --------------------- --------------------------
---------------- ---- ---------------------
---
-
---------- -
---------------------------------
-
-在上面的代码中，我们使用 FormBuilder 创建了 4 个表单控件，它们分别是 name、email、password 和 confirmPassword。在表单中，我们需要设置每个控件的 formControlName 属性，以便表单和表单控件建立联系。
下面是在模板中创建表单时，如何使用表单控件的示例代码：
-- -------------------- ---- -------
----- ---------------------- ------------------------
-----
------ ------------------------
------ ----------- --------- -----------------------
----- ----------------------------------------- -- -------- --- ---- -- -- ----- - ---------- -----------
------
-----
------ --------------------------
------ ------------ ---------- ------------------------
----- --------------------------------------------- ------------
------
-----
------ --------------------------------
------ --------------- ------------- ---------------------------
----- ------------------------------------------------- -- -------- --- ---- -- -- ----- - ---------- -----------
------
-----
------ ----------------------------- -----------------
------ --------------- -------------------- ----------------------------------
----- ------------------------------------------------------- -- --- ------------
------
------- ------------- ---------------------------------------------
-------在模板中，我们使用 formControlName 属性把表单控件和表单关联起来。同时，我们也设置了一些校验规则和错误提示信息，使得用户可以更好地进行表单填写和校验。
总结
本篇文章介绍了 Angular 7 中如何使用响应式表单来构建复杂的表单。我们通过使用 FormBuilder 和 FormGroup 来创建表单和管理表单状态，并介绍了如何设置表单控件的默认值、校验器和错误提示。同时，我们还提供了示例代码来帮助读者更好地理解和学习。
响应式表单在 Angular 应用开发中是一个非常实用的特性，它可以提高表单的灵活性和可定制性，帮助开发者更好地管理表单。如果你正在开发 Angular 应用，响应式表单是一个值得学习和掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64941d5148841e98941a4367