作为一名前端开发，我们经常需要进行表单数据的验证，以保证用户输入的数据符合要求，才能进行下一步操作。在 Angular2 中，如何实现表单数据的动态验证呢？本文将为大家详细介绍实现方法和相关知识。
简介
Angular2 是一种 TypeScript 编写的开放源代码 Web 应用程序框架，是 AngularJS 的升级版。在 Angular2 中，表单数据的验证是通过 Reactive Forms 和 Template-driven Forms 两种方式来实现的。
Reactive Forms 是通过编写 TypeScript 代码来定义表单的结构和验证规则，需要开发人员手动订阅表单控件值的变化。而 Template-driven Forms 是通过在 HTML 模板中编写指令来定义表单的结构和验证规则，会自动订阅表单控件值的变化。
在本文中，我们将着重介绍 Reactive Forms 的使用方法，因为它更加灵活，可以进行更加复杂的表单验证操作。
Reactive Forms 的基础使用
在 Reactive Forms 中，我们需要引入 Angular Forms 模块，并通过 DI （依赖注入）方式将其注入到组件中。然后我们可以使用 FormBuilder 来创建表单和表单控件。
以下是一个简单的实例，创建了一个包含姓名和年龄两个字段的表单：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
------- ----------
------------------- --- ------------ -
------------------
-
------------- ---- -
----------- - ---------------
----- ---- ---------------------
---- ---- ------------------
---
-
-在上面的例子中，我们使用 FormBuilder 创建了名为 myForm 的表单，并定义了两个表单控件：name 和 age。name 的初始值为空，且为必填项；age 的初始值为空，其值必须大于等于 0。
在 HTML 模板中，我们可以使用 Reactive Forms 可供的指令来实现表单控件的绑定和验证：
-- -------------------- ---- -------
----- ---------------------
-----
------ ------------------------
------ ----------- --------- -----------------------
---- -------------------------------------- -- ---------------------------------
------ ----- - -----
------
------
-----
------ ----------------------
------ ------------- -------- ----------------------
---- ------------------------------------- -- --------------------------------
------ ----- - ----- ----
------
------
------- ------------- -------------------------------------------
-------在上面的 HTML 模板中，我们使用 [formGroup] 指令来将表单绑定到 myForm 对象上，在每个表单控件上使用 formControlName 指令来进行绑定。在每个表单控件下面，我们使用内置指令 *ngIf 来进行动态验证和错误提示，当表单控件的值不符合要求时，会自动提示错误信息。
最后，我们在提交按钮上使用 [disabled] 指令来控制提交按钮的可用性，表单控件的值有错误时，将禁止用户提交表单。
实现动态表单验证
以上只是 Reactice Forms 的基础用法，下面我们将讲述如何实现动态表单验证。
在 Reactive Forms 中，我们可以通过 subscribe 方法来实现对表单控件值的动态订阅。当表单控件值发生变化时，我们可以对其进行动态验证。
以下是一个简单的例子，在表单中添加了一个邮箱地址的控件，但是该控件是非必填项。当该控件有值时，需要对其进行邮箱格式的动态验证：
-- -------------------- ---- -------
------------- ---- -
----------- - ---------------
----- ---- ---------------------
---- ---- -------------------
------ ----
---
-- ---- ----- --
----------------------------------------------------- -- -
-- ------- -
---------------------------------------------------------
- ---- -
-------------------------------------------
-
--------------------------------------------------
---
-在上面的例子中，我们在表单创建时动态订阅了 email 控件的值，通过 setValidators 和 clearValidators 方法来给 email 控件动态添加和清除 Validators.email 邮箱格式的验证器，updateValueAndValidity 方法用于更新控件的状态。
在 HTML 模板中，我们需要保证当 email 控件的值存在时，Validators.email 验证器是被使用的：
<div>
<label for="email">Email:</label>
<input type="text" id="email" formControlName="email">
<div *ngIf="myForm.controls['email'].invalid && myForm.controls['email'].touched">
Please enter a valid email address.
</div>
</div>在上面的 HTML 模板中，我们使用和之前相同的方式进行动态验证和错误信息提示。
结论
通过以上的介绍和示例代码，相信大家已经可以掌握 Angular2 中实现表单数据动态验证的方法，包括表单的基础使用和动态验证的实现。在实际开发中，可以根据具体业务需求和实际情况，进行更加复杂和灵活的表单验证操作，以提高用户体验和数据的安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6748466b93696b0268ee5149