Angular 是一款流行的前端框架，大多数 web 应用都需要表单，而表单验证是应用的重要部分，可以保证用户提交的数据是正确的。本文将介绍 Angular 中表单验证的方法，包括模板驱动和响应式表单。
模板驱动表单验证
模板驱动表单是 Angular 中最简单的表单验证方法。一个典型的例子就是通过 ngModel 绑定表单输入框的值。下面是一个简单的示例：
-- -------------------- ---- -------
----- ---------------
-------
-----
------ ----------- ------------------ -------------------- -------- --------------
---- ------------------------ -- ---------------- -- --------------------
---- ----------------------------------
---- -- ---------
------
---- -----------------------------------
---- ---- -- -- ----- --------------------------------------------- ---------- -----
------
------
--------
------- ------------- ---------------------------------------
-------这个例子定义了一个名为 form 的表单，其中有一个 input 元素用来输入名字。这个输入框必须填写，并且长度必须不少于 2 个字符。当输入框 invalid 时，将显示错误消息。
在模板驱动表单中，可以使用模板引用变量（如 #nameInput="ngModel"）和指令属性（如 required 和 minlength）来声明输入框的验证规则。可以使用 ngIf 来根据表单控件的状态来显示错误消息。
可以使用 form.invalid 属性来禁用提交按钮，以防止未填写必填项。
响应式表单验证
响应式表单是 Angular 中高级的表单验证方法。与模板驱动表单不同，响应式表单是通过代码实现的，需要导入 ReactiveFormsModule。
下面是一个简单的响应式表单示例：
-- -------------------- ---- -------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- ---------- ------ -
----- ----------
---------- -
--------- - --- -----------
----- --- --------------- -
--------------------
------------------------
---
------ --- --------------- -
--------------------
-----------------
---
-------- --- -----------
------- --- ----------------
----- --- ----------------
------ --- ----------------
---- --- ----------------
---
---
-
---------- -
-----------------------------
-
-这个例子中，我们创建了一个表单控件树，包括姓名、电子邮件和地址各自的控件，以及地址中的街道、城市、州和邮政编码的控件。
在控件实例化时，我们为每个表单控件定义了验证规则，并将其添加到 FormGroup 中。可以在 FormGroup 实例中使用 get 方法来访问表单控件。例如，在模板中访问地址街道的值，可以写成 form.get('address.street').value。
当表单数据验证无误时，可以使用 form.value 属性将数据提交到服务器上。
结论
使用 Angular 内置的表单验证可以帮助我们保证用户输入的数据有效且正确。通过模板驱动表单和响应式表单，我们可以轻松应对不同的表单验证需求，并且增强应用程序的可靠性。
参考文献：
- Angular Reactive Forms Tutorial: Learn How to Build Forms
- Angular Template-Driven Forms Tutorial: Create a Simple Login Form
- Angular Form Validation: Writing Custom Validators
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/672b1b37ddd3a70eb6d1b0ac