Angular 是目前非常流行的前端框架之一，同时也对表单验证提供了非常好的支持。在现代 Web 应用中，表单是非常重要的一部分，因此 Angular 的表单验证机制也非常重要。在本文中，我们将教您如何使用 Angular 实现表单验证。
安装 Angular
在开始之前，您需要安装 Angular。您可以使用 npm 在命令行中安装 Angular。
npm install -g @angular/cli
安装完成后，您可以使用 ng 命令来创建新的 Angular 应用程序。
ng new my-app
接下来，切换到新创建的应用程序目录中。
cd my-app
基本的表单验证
在 Angular 中，表单验证通过所谓的“指令”来实现。表单指令可以用来监控和控制表单输入，帮助您确保用户通过表单输入正确的数据。最简单的指令是 Required 指令，它要求用户输入必填字段。
首先，我们需要导入 FormModule 模块。您可以在 app.module.ts 文件中实现这一点。
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ----------- - ---- -----------------
------ - ------------ - ---- ------------------
-----------
-------- -
--------------
-----------
--
------------- -
-------------
--
---------- --------------
--
------ ----- --------- - -接下来，我们需要在 HTML 文件中添加表单元素。我们将创建一个简单的联系表单，并添加一些验证。我们将在此使用 Angular 模板语法。
-- -------------------- ---- -------
----- ----------------------
-----
------ --------------------- -------------
------ -----------
--------------
----------------
-----------------------
--------
--------------
------
-----
------ ------------------- -------------
------ -----------
-------------
---------------
----------------------
--------
--------------
------
-----
------ --------------------------
------ ------------
----------
------------
-------------------
---------
------
------- ------------- -----------------------------------------------
-------现在让我们来学习一下这个模板。我们使用 ngForm 指令来创建一个表单，使用两个 div 来表示两个字段，firstName 和 lastName。对于每个字段，我们设置了一个唯一的 id 和 name。此外，我们通过添加 [(ngModel)] 属性将这两个字段绑定到 Angular 组件中的成员变量。要求必填字段是通过在 input 元素上添加 required 属性来实现的。
现在，如果我们运行应用程序并尝试提交空表单，则会在表单上显示错误消息。
高级的表单验证
Angular 还支持更复杂的表单验证，如比较两个字段的值，如密码和确认密码。
-- -------------------- ---- -------
----- -------------------- --------------------------------
-----
------ --------------------- -------------
------ -----------
--------------
----------------
-----------------------
--------
--------------
------
-----
------ ------------------- -------------
------ -----------
-------------
---------------
----------------------
--------
--------------
------
-----
------ --------------------------
------ ------------
----------
------------
-------------------
---------
------
-----
------ --------------------------------
------ -----------
-------------
---------------
----------------------
--------
--------------
------
-----
------ --------------------------------
------ ---------------
-------------
---------------
----------------------
--------
--------------
------
-----
------ ----------------------------- -----------------
------ ---------------
--------------------
----------------------
-----------------------------
--------
--------------
------
---- ------------------------------------------ --- --------------------------------------------
--- --------- -- --- ------
------
------- ------------- ----------------------------------------------
-------与前面的示例类似，我们首先创建了一个表单并添加了一些必填字段，如 firstName、lastName、email、username 等。对于密码和确认密码，我们添加了一个必填字段和长度限制。最后，我们添加了一个额外的 div，用来计算一个自定义的表单验证，以确保密码与确认密码匹配。
在 Angular 中，要比较两个表单字段需要使用 FormGroup 和 FormControl。
我们首先需要修改我们的组件类，以创建一个嵌套的 FormGroup 和两组 FormControl 对象。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -------------
------------ -------------------------
--
------ ----- --------------- -
----------- ----------
------------------- ------------ ------------ - -
---------- -
--------------- - ------------------------
---------- ---- ---------------------
--------- ---- ---------------------
------ ---- ---------------------
--------- ---- ---------------------
--------- ---- --------------------- --------------------------
---------------- ---- --------------------- -------------------------
---
-
------------ ---------- -
-- ------------ -
------------------
-
-
-正如我们所看到的，我们现在将 signupForm 指定为 FormGroup，然后在构造函数中使用 FormBuilder 来创建它。
FormGroup 可以包含多个 FormControl 对象，每个 FormControl 表示表单的一个输入字段。在示例中，我们使用了两个 FormControl，password 和 confirm password。为了比较这两个字段，我们添加了一个函数来计算表单验证，并在 HTML 模板中使用它。
<div *ngIf="signupForm.controls.password?.value !== signupForm.controls.confirmPassword?.value"> The passwords do not match. </div>
总结
表单验证是 Web 应用程序中重要的一部分，Angular 已经提供了非常好的支持。通过使用 Angular 表单验证指令，您可以轻松确保您的用户输入了正确的数据。这篇文章就介绍到这里，我们通过几个示例和代码演示了 Angular 表单验证的基本和高级特性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64704b39968c7c53b0e6cb3e