概述
Angular 是一个流行的前端框架，使用 TypeScript 语言来构建单页应用程序（SPA）。使用响应式表单可以极大地提高 Angular 应用的性能和可维护性，同时实现数据的双向绑定。本文将介绍 Angular 中如何实现响应式表单，包括表单控件的定义、绑定、设置校验以及处理表单提交等内容。
实现响应式表单
定义表单控件
在 Angular 中，可以使用 ReactiveFormsModule 模块来定义表单控件。通过 FormGroup、FormControl、FormArray 等类，可以定义各种类型的表单控件。FormGroup 表示表单的一个组，FormControl 表示一个表单控件，包括输入框、下拉框等控件，FormArray 表示表单控件的数组，一般用在动态添加表单控件的场景中。
下面是一个简单的表单示例，包含两个表单控件，分别是输入框和下拉框：
------ - --------- - ---- ----------------
------ - ---------- ------------ ------------ ---------- - ---- -----------------
------------
--------- -----------
------------ -----------------------
--
------ ----- ------------- -
----- ----------
------------------- --- ------------ -
------------------
-
------------ -
--------- - ---------------
----- --- --------------- ---------------------
------- --- --------------- --------------------
---
-
-在上面的示例中，我们先引入 ReactiveFormsModule 模块和 FormBuilder、FormControl、Validators 等相关类，然后定义了一个 FormComponent 组件。在组件的构造函数中，我们调用了 createForm 方法来初始化表单控件。在 createForm 方法中，我们使用 FormBuilder 类来定义一个 FormGroup，其中包含两个子 FormControl：name 和 gender。其中，name 的初始值是空字符串，而 gender 的初始值也是空字符串，在后面的下拉框控件中会更改。
绑定表单控件
在上面的示例中，我们已经定义了表单控件，但还没有将它们绑定到 html 模板中。为此，我们需要使用表单指令来绑定表单控件，包括 formGroup、formControl、formArrayName、formGroupName 等指令。
下面是一个简单的表单模板示例：
----- ------------------ ------------------------
-----
------ ------------------------
------ ----------- --------- -----------------------
------
-----
------ ----------------------------
------- ----------- -------------------------
------- --------------- ---------------
------- --------------------------
------- ------------------------------
---------
------
------- ------------- -----------------------------------------
-------在上面的模板中，我们首先使用 formGroup 指令来绑定 form 变量到表单元素上，然后使用 formControlName 指令来将表单控件 name 和 gender 分别绑定到输入框和下拉框控件上。最后，我们使用 ngSubmit 指令来指定表单提交时的处理函数 onSubmit，同时在按钮上绑定了一个表达式，用来判断是否禁用提交按钮，即当表单中存在非法输入时，提交按钮将被禁用。
设置表单校验
在上面的示例中，我们使用了 Validators.required 来设置了 name 和 gender 表单控件的必填校验，这是通过在 FormControl 构造函数的第二个参数中设置的。在 Angular 中，还有许多内置的校验器可以使用，比如 Validators.minLength、Validators.maxLength、Validators.pattern、Validators.email 等。
如果需要自定义表单校验，可以通过 Validators 自定义一个校验器函数，例如：
------ - ---------------- ---------- - ---- -----------------
------ -------- ------------------------------ -------- ----------- -
------ --------- ----------------- - ----- -------- --- - - ---- -- -
----- --------- - ---------------------------
------ --------- - - ---------------- - ------ ------------- - - - -----
--
-上面的示例定义了一个名为 forbiddenNameValidator 的表单校验器函数，用来检查表单控件中的值是否符合某个正则表达式。在这个示例中，我们使用了 ValidatorFn 类型来定义这个函数，它返回一个函数，这个函数又返回一个对象，其中包含一个错误消息和错误值。如果表单控件的值符合校验器中定义的规则，则返回 null；否则，返回一个包含错误消息和错误值的对象，用来提示表单控件中的错误信息。
处理表单提交
在 Angular 中，可以使用 ngSubmit 指令来处理表单提交。当用户单击提交按钮时，处理函数 onSubmit 就会被调用，这个函数中可以对表单数据进行处理、验证、保存等操作，同时阻止表单元素的默认提交行为。
下面是一个简单的表单处理函数示例，它会打印出表单控件的值，并在控制台中输出：
---------- - ----------------------------- -
总结
在本文中，我们介绍了 Angular 中实现响应式表单的方法，包括表单控件的定义、绑定、校验和提交等。使用 Angular 的 ReactiveFormsModule 模块可以方便地实现响应式表单，提高应用的可维护性和性能。同时，我们还介绍了如何使用 Validators 类中的内置校验器来设置表单校验规则，并可以通过自定义校验器函数来实现更加灵活的校验规则。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/652b872a7d4982a6ebd5eaff