Angular 是一款由 Google 开发的前端框架，提供了强大的数据绑定、组件化、依赖注入等功能。其中表单验证是 Angular 中常用的功能之一，本文将介绍如何使用 Angular 框架来实现前端 Form 表单验证的功能，并附有示例代码。
获取表单数据
要验证表单数据，首先需要获取表单中的数据。在 Angular 中，可以使用 ngForm 和 ngModel 指令来获取表单数据，如下所示：
<form #myForm="ngForm"> <input [(ngModel)]="name" name="name" #name="ngModel" required> <input [(ngModel)]="email" name="email" #email="ngModel" required email> <button type="submit" [disabled]="myForm.invalid">提交</button> </form>
在这个表单中，ngForm 指令将表单元素绑定到一个指定的表单组，即 myForm，这使得表单组件可以被使用 @ViewChild 注解来访问。
[(ngModel)] 指令实现了数据双向绑定，当用户在表单中输入数据时，该数据被实时更新到组件中。name 属性和 #name 指令分别用于指定表单元素的名称和引用该元素的名称，以便进行表单验证和错误信息的显示。
表单验证
在 Angular 中，表单验证可以通过多种方式实现，在这里我们主要介绍 Angular 内置的验证器和自定义验证器。
内置验证器
Angular 提供了一系列内置验证器，包括必填项、最小长度、最大长度、正则表达式、邮箱格式等等。这些内置验证器可以通过在表单元素上添加 required、minlength、maxlength、pattern 以及 email 等属性来实现。
<form #myForm="ngForm">
<input [(ngModel)]="name" name="name" #name="ngModel" required>
<input [(ngModel)]="age" name="age" #age="ngModel" min="18" max="100">
<input [(ngModel)]="email" name="email" #email="ngModel" required email>
<input [(ngModel)]="phone" name="phone" #phone="ngModel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">
<button type="submit" [disabled]="myForm.invalid">提交</button>
</form>上面的代码演示了几个内置验证器的使用，包括必填项、最小年龄和最大年龄、邮箱格式和电话号码格式。
所有的内置验证器都以属性指令的形式提供，可以通过添加属性来启用验证。除了邮箱格式验证以外，这些内置验证器都可以通过指定元素的属性来配置。
自定义验证器
除了内置验证器外，Angular 还支持自定义验证器。自定义验证器通过函数的方式实现，该函数接受一个 AbstractControl 类型的参数，该参数表示当前控件的状态。该函数必须返回一个对象，该对象的属性名表示验证器的名称，属性值表示验证器的值。
function invalidNameValidator(control: AbstractControl): { [key: string]: boolean } | null {
const invalidNames: string[] = ['admin', 'root'];
if (invalidNames.indexOf(control.value) !== -1) {
return { 'invalidName': true };
}
return null;
}上面的代码是一个自定义验证器的示例，该验证器用于检查用户名是否为一些不允许的值。当控件的值为已知的无效名称时，返回一个对象，否则返回 null。
在使用自定义验证器时，需要将自定义验证器添加到表单控件的验证器数组中，例如：
<input [(ngModel)]="name" name="name" #name="ngModel" required [validateUsername]="name.value">
该代码中，name.value 表示当前表单元素的值。[validateUsername] 是一个名为 validateUsername 的自定义验证器，它会将表单元素的值传递给自定义验证器函数，返回一个验证结果。
-- -------------------- ---- -------
------------
--------- ------------------------------
---------- -
- -------- -------------- ------------ ------------------ ------ ---- -
-
--
------ ----- ----------------- ---------- --------- -
-------------------------- ------------- -------
----------------- ----------------- - ----- -------- --- - - ---- -
----- ------- - ------------------------------
-- --------- -
------ --------
-
-- -------------- --- ------------------ -
------ - ----------- ---- --
-
------ -----
-
-上面的代码定义了一个名为 UsernameValidator 的指令，它可以扩展内置的 Validator 接口，实现非常灵活的自定义验证器。它使用 @Input 注解来接受外部传进来的表单元素的值，并将该值传递给自定义验证器函数进行验证。该指令还需要提供给 NG_VALIDATORS，同时需要将 multi 参数设置为 true，以确保它能够和内置验证器一起使用。
错误信息的显示
在 Angular 中，显示错误信息可以通过几个方式来实现，包括使用 ngForm 和 ngModel 指令、使用 ngIf 和 ngClass 指令等。
<form #myForm="ngForm">
<input [(ngModel)]="name" name="name" #name="ngModel" required>
<div *ngIf="name.errors && (name.dirty || name.touched)">
<div [ngClass]="{ 'has-error': name.errors.required }">用户名为必填项</div>
<div [ngClass]="{ 'has-error': name.errors.invalidName }">用户名不可使用</div>
</div>
<button type="submit" [disabled]="myForm.invalid">提交</button>
</form>在上面的代码中，*ngIf 指令可以显示或隐藏错误消息，ngClass 指令可用于设置根据错误类型设置不同的样式。
总结
Angular 提供了丰富的表单验证功能，并支持扩展和自定义验证器。虽然使用 Angular 来验证表单数据需要一些学习和实践，但一旦熟练掌握，就会大大提高前端开发效率。本文介绍了 Angular 中的表单验证、获取表单数据和错误信息的显示，并提供了相关代码示例，希望能对前端开发者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64df487cf6b2d6eab3a7c7d0