什么是响应式表单
在 Angular 中，响应式表单是一种以编程方式创建和验证表单的方式。与模板驱动表单不同，响应式表单直接利用了 Angular 的 Reactive Programming （反应式编程）库 RxJS 来监听和处理表单值的变化。响应式表单利用了 FormControl、FormGroup 和 FormArray 来定义表单内容和验证规则，并通过 FormBuilder 来简化表单创建的流程。
如何使用响应式表单
导入 FormsModule 和 ReactiveFormsModule
在使用响应式表单之前，我们需要先导入 FormsModule 和 ReactiveFormsModule 模块。FormsModule 模块是 Angular 自带的模板驱动表单模块，而 ReactiveFormsModule 则是响应式表单模块。
-- -------------------- ---- -------
------ - ------------ ------------------- - ---- -----------------
-----------
-------- -
------------
-------------------
--
---
--
------ ----- --------- - -创建 FormGroup
在创建响应式表单之前，我们需要先创建一个 FormGroup 来存储所有表单控件及其属性。我们可以利用 FormBuilder 来创建一个 FormGroup。
-- -------------------- ---- -------
------ - ------------ ---------- ---------- - ---- -----------------
------ ----- ----------- ---------- ------ -
------- ----------
------------------- --- ------------ - -
---------- -
----------- - ---------------
----- ---- ---------------------
------ ---- --------------------- -------------------
------ -----
-------- ---------------
------- -----
----- -----
------ -----
---- ----
--
---
-
-在上面的例子中，我们定义了一个名为 myForm 的 FormGroup，其中包含了 name、email、phone 和 address 四个 FormControl。
绑定 FormGroup
在模板中，我们可以通过 FormGroupDirective 和 formGroupName 指令来绑定 FormGroup。
-- -------------------- ---- -------
----- ---------------------
------ -----------------------
------ ------------------------
------ ------------------------
---- ------------------------
------ -------------------------
------ -----------------------
------ ------------------------
------ ----------------------
------
-------在表单控件中，我们必须使用 formControlName 指令来绑定对应的 FormControl。
处理表单事件
在响应式表单中，我们可以通过 valueChanges 这个 Observable 来监听表单值的变化。
-- -------------------- ---- -------
------ ----- ----------- ---------- ------ -
------- ----------
------------------- --- ------------ - -
---------- -
----------- - ---------------
----- ---- ---------------------
------ ---- --------------------- -------------------
------ -----
-------- ---------------
------- -----
----- -----
------ -----
---- ----
--
---
---------------------------------------- -- -
------------------- -- ------
---
-
-在上面的例子中，我们定义了一个 valueChanges Observable 来监听表单值的变化。在表单值发生变化时，我们会输出表单的值到控制台上。
总结
响应式表单是一种以编程方式创建和验证表单的方式。在 Angular 中，我们使用 FormGroup、FormControl 和 FormArray 来定义表单的内容和验证规则，并使用 FormBuilder 来简化表单创建的过程。
使用响应式表单可以让我们更加灵活地对表单进行控制，并且方便地处理表单值的变化。
示例代码：
-- -------------------- ---- -------
------ - ---------- ------ - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- -------------------
------------ --------------------------------
---------- --------------------------------
--
------ ----- ----------- ---------- ------ -
------- ----------
------------------- --- ------------ - -
---------- -
----------- - ---------------
----- ---- ---------------------
------ ---- --------------------- -------------------
------ -----
-------- ---------------
------- -----
----- -----
------ -----
---- ----
--
---
---------------------------------------- -- -
------------------- -- ------
---
-
--- -------------------- ---- -------
----- ---------------------
------ -----------------------
------ ------------------------
------ ------------------------
---- ------------------------
------ -------------------------
------ -----------------------
------ ------------------------
------ ----------------------
------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64898f0a48841e98947d7494