在 Angular 中，表单验证是构建交互式应用程序的基本要素之一。如果没有正确的表单验证，用户可能会提交错误的数据，这会导致应用程序的错误和不一致。本文将介绍 Angular 表单验证中的一些基本规则和自定义指令，以及如何创建自定义验证器。
表单验证规则
在 Angular 中，默认情况下提供了几种表单验证规则。你可以定义不同的验证规则来验证表单字段是否有效。例如，当用户在输入框中输入无效的数据时，可以向用户显示警告消息或错误消息。
以下是 Angular 中的一些默认验证规则：
- required: 表示必须填写字段。
- minlength: 表示字段必须拥有至少一个指定的最小长度。
- maxlength: 表示字段的最大长度。
- pattern: 表示字段必须匹配指定的正则表达式。
这些规则可以通过表单控件、表单组或整个表单应用。
自定义指令
除默认验证器外，Angular 还允许您创建自定义指令来执行自定义验证逻辑。下面是一个基本的自定义指令示例，该指令用于在表单控件上应用自定义验证规则。
-- -------------------- ---- ------- ------ - ---------- ----- - ---- ---------------- ------ - -------------- ---------- --------------- - ---- ----------------- ------------ --------- -------------------- ---------- - - -------- -------------- ------------ ------------------------- ------ ----- -- -- -- ------ ----- ------------------------ ---------- --------- - ------------------------- ------------ ---- ----------------- ----------------- - ----- -------- --- - - ---- - --- ------- - ------------- --- ----------------- ------ ------- - ---- - - ---------------- -------- ------ -- - -展开代码
注意，自定义指令必须实现 Validator 接口，并且指令的名称必须以“Validator”结尾。如上所示，此自定义指令的名称为 CustomValidatorDirective。
在上面的示例中，自定义验证器会比较表单控件的值与用于验证的自定义值（customValue）。如果这些值相同，该验证器将返回 null，表明该控件的值是有效的。否则，它将返回一个包含错误消息的键值对，表示控件的值是无效的。
自定义验证器
在 Angular 中，可以通过实现 ValidatorFn 接口来创建自定义验证器。
以下是一个示例，该示例创建了一个自定义验证器，用于验证两个表单控件之间的相等性。
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- ----------------- ------ -------- --------------- ------------ ------- -------------------- ------ -- ----------- - ------ --------- ----------------- - ----- -------- --- - - ---- -- - ----- ---------------- - -------------------------------------- -- ----------------- -- ---------------------- --- -------------- - ------ - ------ ---- -- - ------ ----- -- -展开代码
在这个例子中，matchValidator 函数返回一个 ValidatorFn 对象，该对象接受一个 AbstractControl 对象作为参数并返回一个包含错误消息的键值对。要比较的两个表单控件的名称由 controlName 和 matchingControlName 参数传递。
使用自定义验证器
可以像使用默认验证器一样使用自定义验证器。例如，在模板中使用自定义验证器时，可以通过将自定义验证器名称添加到 Validators 数组中来使用它：
import { matchValidator } from './match-validator'; this.form = this.fb.group({ password: [null, [Validators.required, Validators.minLength(6)]], confirmPassword: [null, [Validators.required, matchValidator('password', 'confirmPassword')]], });
在这个例子中，matchValidator 用于验证 confirmPassword 字段的值是否与 password 字段的值相同。
我们可以看到，自定义的验证规则和指令可以将 Angular 表单处理提升到一个更高的水平，并且使开发人员可以以更好的方式控制和管理表单控件的验证过程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bbce47306f20b3a6b8e6db
