表单验证在前端开发中是一个必不可少的环节，要求用户按照一定的规则填写表单内容，以避免输入错误导致的数据错误。而 Angular 框架在表单验证方面提供了极好的支持，能让开发者更轻松地实现对表单的验证处理。本文中将介绍 Angular 中表单验证的相关知识和实践方法。
理解 Angular 表单验证的基础知识
在 Angular 中，数据绑定和表单按照一定的规则进行工作，禁止输入非法的字符。当用户提交表单时，表单数据都会被收集到一个对象中，可以通过表单验证器进行验证。在进行表单验证时，需要用到 validators 对象，这是一个来自 '@angular/forms' 的模块，用于实现表单验证功能。它提供了许多内置验证器，如：
- required：检查输入是否为空，并且如果值是 null 或 undefined，则返回无效；
- minlength：检查输入字符数是否满足一定要求；
- maxlength：检查输入字符数是否超出一定范围；
- pattern：检查输入是否符合指定的正则表达式。
在使用表单验证器时，需要确定表单控制器的值是否有效，如果无效，给出相应的错误信息。可以利用 Angular 内置的错误输出属性来实现这一点。
实现表单验证器
Angular 中的表单验证是通过 validators 对象来实现的。不过，可以编写自己的表单验证器，这些验证器可以根据特定的需求来验证表单。
以下是验证器的示例代码：
------ - ------------ --------------- - ---- -----------------
------ -------- ------------------------------ -------- ----------- -
------ --------- ----------------- ------ -------- ---- - ---- -- -
----- --------- - ---------------------------
------ --------- - ----------------- ------- --------------- - -----
--
-在这个示例中，forbiddenNameValidator 是从 @angular/forms 模块中导入的。该函数接受一个由正则表达式组成的参数，然后返回一个校验器函数。
校验器函数则接受一个实现抽象控制器的对象，然后检查该对象的 value 属性是否匹配指定的正则表达式。如果验证不通过则返回带有错误信息的对象，否则返回 null。
在表单中应用验证器
在 Angular 中，可以通过 validators 属性来将验证器应用到表单中。以下是一个针对 Angular 表单验证的示例：
------ - --------- - ---- ----------------
------ - ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
----- -------------------- ------------------------
------ ----------------------- --------------------
---- ----------------------------------------------- -- ---------------------------- --------------
----- -- ---------
------
---- ---------------------------------------------- -- ---------------------------- --------------
----- -- --------
------
------- ------------- ------------------------------------------
-------
-
--
------ ----- ------------ -
------ - ---------------
------ ---- --------------------- -------------------------------------------------------------------------------------------------------------------------------------------------------------------
---
------------------- --- ------------ --
---------- -
-------------------------------
-
-在这个示例中，onSubmit() 函数用于输出表单值，myForm 属性用于设置表单的验证器，并通过 formControlName 属性来绑定表单控件。
hasError() 和 touched 属性用于判断表单控件是否满足验证条件。通过组合使用这些属性，可以简单有效地完成表单验证。
注意，当表单控件收到焦点时，touched 属性会自动更新。这样，即使用户在仍处于表单操作阶段的时候代码发生了更新，表单验证也不会对此造成影响。
总结
本文介绍了 Angular 中表单验证的相关知识和实践方法。通过使用 Validators 和 Angular 框架提供的内置验证器，可以轻松实现表单验证的各种需求。在实践中，还可以编写自定义的验证器来满足特定的验证需求。希望本文能够帮助读者更加深入地理解 Angular 中的表单验证，并优雅地应用于开发实践中。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653296357d4982a6eb55c66e