Angular 是一种流行的前端框架，用于开发大型 Web 应用程序。在 Angular 中，我们经常需要验证表单的输入。有时候，我们需要验证多个相关字段，例如： 当一个字段填写了值，另一个字段必须也填写了值；或者两个字段的值必须满足某些限制条件。在本文中，我们将介绍如何实现这样的表单验证。
概述
在 Angular 中，我们可以使用 FormGroup 和 FormControl 来处理表单的输入和验证。FormGroup 是一组 FormControl 的容器，FormControl 则表示表单中的一个输入控件。我们可以使用 FormGroup 和 FormControl 来验证单个字段，但是当我们需要验证多个相关字段时，就需要使用自定义验证器。
自定义验证器
自定义验证器是一段函数，用来验证 FormGroup 中的多个 FormControl 是否满足特定的要求。自定义验证器通常返回一个对象，其中包含验证失败的信息。如果所有的验证都通过了，就返回 null。
基本结构
自定义验证器的基本结构如下所示：
-------- ------------------ ----------------- - ----- -------- --- - - ---- - -- ---- ------ - ---------- ---- -- -
validator 函数接收一个 AbstractControl 对象作为参数，该对象可以是一个 FormGroup 或者 FormControl。函数返回一个对象，其中包含错误的名称和一个布尔值。如果验证失败，就返回该对象；如果验证通过，就返回 null。
FormGroup 中的自定义验证器
在 FormGroup 中添加自定义验证器的方法很简单。我们只需要创建一个函数，然后把它传递给 FormGroup 的 validators 属性即可。例如，下面的代码是一个用于验证两个相关字段的函数：
-------- --------------------------------- ----------- - ----- -------- --- - - ---- -
----- ------ - ------------------------
----- ------ - ------------------------
-- ------------- -- -------------- -
------ - ----------------- ---- --
-
------ -----
-该函数接收一个 FormGroup 对象作为参数，然后使用 get 方法获取与 field1 和 field2 相关联的 FormControl。如果 field1 包含值但是 field2 没有值，函数就会返回包含错误名称 "field2Required" 的对象。
要将该自定义验证器添加到 FormGroup 中，请使用以下代码：
----- ------ - --- ----------- ------- --- -------------- ------- --- -------------- -- - ----------- ---------------------- ---
当 FormGroup 中的任何一个 FormControl 发生更改时，都会触发该验证器。如果验证失败，就会向 FormGroup 添加一个 errors 属性，其中包含验证错误信息的对象。
FormControl 中的自定义验证器
在 FormControl 中添加自定义验证器的方法也很简单。我们只需要创建一个函数，然后把它传递给 FormControl 的 validators 属性即可。例如，下面的代码是一个用于验证手机号码的函数：
-------- ----------------------- ------------- - ----- -------- --- - - ---- -
----- ----- - --------------
-- ---------------------------------- -
------ - -------- ---- --
-
------ -----
-该函数接收一个 FormControl 对象作为参数，然后使用 value 属性获取 FormControl 的值。如果值不符合手机号码的格式，函数就会返回包含错误名称 "phone" 的对象。
要将该自定义验证器添加到 FormControl 中，请使用以下代码：
----- --------- - --- --------------- ----------------
当 FormControl 的值发生更改时，都会触发该验证器。如果验证失败，就会向 FormControl 添加一个 errors 属性，其中包含验证错误信息的对象。
示例代码
下面是一个示例代码，该代码演示了如何使用自定义验证器来验证两个相关字段。在本示例中，第二个字段必须填写，当第一个字段填
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/30791