表单验证是 Web 开发中非常基础且重要的一个模块之一，其目的是为了确保数据的正确性、完整性以及适用性。在 Angular 中，表单验证是一项非常成熟的功能，本文将详细介绍如何实现 Angular 中的表单验证，并且提供示例代码和深入思考以及学习指导。
概述
在 Angular 中，表单验证是通过内置的 Form 模块和 Validators 应用程序库实现的，它提供了繁多的内置验证器并且支持自定义验证器和异步验证器。表单验证可以分为两类：响应式表单和模板驱动表单。
响应式表单是通过 ReactiveFormsModule 模块实现的，它将表单的状态保存在组件的属性中，并且可以在任何时候动态修改表单的状态。响应式表单在大型应用中具有较大的灵活性和可维护性，但它需要编写大量的代码，并且学习曲线较为陡峭。
模板驱动表单是通过 TemplateDrivenModule 模块实现的，它将表单的状态保存在模板中，并且需要指定模板引用变量的方式来访问表单。模板驱动表单对于中小型应用来说非常适用，但它的可维护性稍稍逊色于响应式表单，限制也比较多。
响应式表单验证
基本使用
下面是一个响应式表单的基本示例：
----- -------------------- ------------------------
-------
---
------ ----------- -----------------------
--------
------- -------------------------
-------在组件中，需要定义 FormGroup 对象和 FormControl 对象，并且通过 FormBuilder 构造函数包装它们：
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
------- ----------
------------------- --- ------------ -
----------- - ----------
------- ---- --------------------
---
-
---------- -
-------------------------------
-
-在这个示例中，我们定义了一个名字为 name 的 FormControl 对象，并且通过 Validators.required 验证器来验证该字段不能为空。FormGroup 对象包含了一个或多个 FormControl 对象，并且可以通过 value 属性来获取FormData 对象。
异步验证
我们也可以通过 Validators.async 自定义一个异步验证器，以实现在数据实时校验的过程中更好的用户体验。例如，以下代码实现了一个异步验证器：
----------- - ----------
-------- ---- -------------------- ---------------------------
---
------------------- ------------- ------------ -
------ --- --------------- -- -
------------- -- -
-- -------------- --- -------------- -
--------- ------------ ---- ---
- ---- -
--------------
-
-- ------
---
-在这个示例中，我们通过 setTimeout 模拟了一个异步请求，并添加了一个 3 秒的延迟时间。如果用户输入的电子邮件地址为 icai@qq.com，就会简单地返回一个验证错误对象。异步验证器返回的结果可以是一个 Promise 或者是 Observable 对象。
自定义验证器
有时候您可能需要实现自定义验证器以满足特定的业务和应用场景，其实在 Angular 中实现自定义验证器非常简单。
下面实现一个自定义验证器，以验证用户输入的密码是否为空或者是否满足指定格式：
-------- -------------------------- ------------- - --- -------- ------- - -
-- ------------------------------------------------------------------------- -
------ - ---------------- ---- --
-
-在这个自定义验证器中，我们采用了正则表达式的方式验证密码是否满足指定格式，如果验证失败就返回一个错误对象。该自定义验证器能够在模板中像内置验证器一样使用。
模板驱动表单验证
模板驱动表单是 Angular 中比较简单和直接的一类表单，它只需要在模板中添加 ngModel 指令来支持数据双向绑定以及必要的验证。
----- ---------------- ------------------------------
-------
---
------ ----------- ----------- ------------------ --------------- ---------
---- ------------------ -- ----------- -- ---------------
---- ------------------------------------------
------
--------
------- -------------------------
-------在这个模板中，我们要求输入框必须填写，否则会出现相应的错误提示。需要注意的是，为了方便绑定，我们在输入框中使用了 ngModel 指令，并且给它起了一个名字叫做 name。并使用“#"语法创建了一个引用变量 name，并将其绑定到 ngModel 上。
在组件中，需要定义 name 属性和 onSubmit 方法来处理表单提交：
------ - --------- - ---- ----------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
----- ------ - ---
-------------- -
------------------------
-
-总结
总之，Angular 提供了非常强大和丰富的表单验证功能，并且支持自定义验证器、异步验证器及内置验证器等。响应式表单性能较好且功能强大，适用于大型应用。模板驱动表单更加直接简单，适用于中小型应用或者某些简单的表单场景。
价值投资计算器
价值投资计算器，是一个帮助投资者快速估算公司价值，判断其是否具备投资潜力的工具。
以便于投资者能够更好地进行投资，获取更好的收益。
参考
示例代码：https://github.com/icai/angular-form-validation
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/664d5a78d3423812e4cb77a3