前言
@ng-validators/ng-validators 是一个 npm 包，可以用于 Angular 应用程序的表单验证。本文将介绍如何使用此 npm 包，并提供一些示例代码和指导意义以帮助你更好地了解如何使用它。
安装
你可以使用以下命令从 npm 安装 @ng-validators/ng-validators 包:
npm install @ng-validators/ng-validators --save
使用方法
安装后，你需要在你的 Angular 应用程序中导入 @ng-validators/ng-validators 包:
import { ValidationService } from '@ng-validators/ng-validators';接下来，你可以在你的组件中注入和使用该服务:
constructor(private validationService: ValidationService) {}验证器
@ng-validators/ng-validators 包中有许多内置的验证器可用。我们将逐步介绍这些验证器，并提供相应的示例代码和指导意义。
必填项验证器
required 验证器检查表单控件的值是否为空。如果表单控件的值为空，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - ----- ------- ----- ------ - --------------------------------------- -- ------- --- ----- - ------------------ -- ----------- - ---- - ------------------ -- --- ----------- -
最小长度验证器
minLength 验证器检查表单控件的值是否至少有指定长度。如果表单控件的值长度小于指定长度，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - ----- ------- ----- ------ - --------------------------------------- ---- -- ------- --- ----- - ------------------ ---- ---- -- ----- -- ------------- - ---- - ------------------ --- -- ----- -- ------------- -
最大长度验证器
maxLength 验证器检查表单控件的值是否至多有指定长度。如果表单控件的值长度大于指定长度，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - ----- ------- ----- ------ - --------------------------------------- --- -- ------- --- ----- - ------------------ ---- ---- -- ---- - ------------- - ---- - ------------------ --- -- ---- - ------------- -
电子邮件格式验证器
email 验证器检查表单控件的值是否符合电子邮件格式。如果表单控件的值不符合电子邮件格式，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - --------------------- ----- ------ - ------------------------------------ -- ------- --- ----- - -------------------- ----- ---------- - ---- - ------------------ ----- ---------- -
正则表达式验证器
pattern 验证器检查表单控件的值是否符合指定的正则表达式。如果表单控件的值不符合正则表达式，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - --------- ----- ------ - ------------------------------------- --------------- -- ------- --- ----- - ------------------ ---- ------- ---- ---------- - ---- - ------------------ -------- ---- ---------- -
最小值验证器
min 验证器检查表单控件的值是否至少为指定值。如果表单控件的值小于指定值，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - --- ----- ------ - --------------------------------- ---- -- ------- --- ----- - ------------------ ---- -- -- ----- ----- - ---- - ------------------ -- -- ----- ----- -
最大值验证器
max 验证器检查表单控件的值是否至多为指定值。如果表单控件的值大于指定值，则验证器会返回一个验证失败的对象。
示例代码:
-- -------------------- ---- ------- ----- ----- - --- ----- ------ - --------------------------------- ---- -- ------- --- ----- - ------------------ ---- -- -- ---- ----- - ---- - ------------------ -- -- ---- ----- -
自定义验证器
你还可以创建自定义验证器来满足你的特定需求。以下是示例代码，其中创建了一个自定义验证器，用于检查密码的长度是否至少为 8 个字符:
-- -------------------- ---- -------
------ - --------- - ---- -------------------------------
----------------------------
------ ----- ----------------------- -
------ ----------------------- ------------ -
----- ----- - --------------
-- ------ -- ------------ - -- -
------ - --------------- ---- --
-
------ -----
-
-在上面的代码中，我们使用 @Validates 装饰器来定义验证器，然后创建一个验证器方法：passwordLength。该方法接受一个 FormControl 对象作为参数，并检查控件的值是否符合你的要求。如果不符合要求，则验证器会返回一个验证失败的对象；否则，返回 null。
最后，你可以在你的表单控件上使用此自定义验证器：
<input type="password" formControlName="password" [ngClass]="{'is-invalid': form.get('password').invalid}">
<div *ngIf="form.get('password').errors && form.get('password').errors.passwordLength" class="invalid-feedback">Password must have at least 8 characters</div>结论
使用 @ng-validators/ng-validators 包可以帮助你轻松创建 Angular 应用中的表单验证。通过本教程提供的示例代码和指导意义，你可以开始使用该包，并掌握其中的各种验证器和自定义验证器。无论你是初学者还是有经验的开发人员，都可以轻松地使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bcc967216659e24486c