在 Angular 中，可以轻松地实现输入框的各种验证功能。但是，有时候我们需要自定义一些验证规则，以适应特殊的业务需求。本文将介绍如何使用 Angular 的 Reactive Forms 实现自定义验证功能。
Reactive Forms 简介
Angular 的 Reactive Forms 提供了一种响应式的方式来管理表单数据。与 Template-driven Forms 不同，Reactive Forms 可以更好地控制表单的状态和行为，并且可以更容易地进行单元测试。
使用 Reactive Forms，我们需要：
- 在组件中引入
FormGroup和FormControl - 创建一个 FormGroup 对象，它包含了所有的 FormControl 对象
- 将 FormGroup 与模板中的表单绑定
自定义验证器
在 Angular 中，我们可以通过自定义验证器来添加额外的验证规则。自定义验证器是一个函数，它接收一个 FormControl 作为参数，并返回一个对象，该对象表示验证失败的情况，或者返回 null 表示验证成功。
下面是一个简单的例子，它验证输入的字符串必须包含某个特定的字符：
-------- ------------------------- -------- ----------- -
------ --------- ----------------- ---------------- - ---- -- -
----- ----- - ------------- -- -------
-- ---------------------- --- --- -
------ - --------- ---- --
-
------ -----
--
-这个自定义验证器接收一个字符串作为参数，返回一个验证器函数。验证器函数接收一个 FormControl 对象作为参数，并在输入字符串中查找 target。如果找不到 target，则返回包含 contains 属性的对象，表示验证失败；否则返回 null 表示验证成功。
使用自定义验证器
要使用自定义验证器，我们需要将它添加到 FormControl 的 validators 数组中。例如：
------ ----- ----------- -
----- ----------
------------------- --- ------------ -
--------- - ---------------
----- ---- ----------------------------
---
-
-上面的代码创建了一个 FormGroup 对象，其中包含一个名为 name 的 FormControl。这个 FormControl 使用了 containsValidator 验证器，它要求输入的字符串必须包含 'abc'。
在模板中，可以使用 ngIf 指令来显示验证错误信息：
---- -------------------------------------------------- ---- ------- -----------
深入理解 Reactive Forms
Reactive Forms 提供了许多强大的功能，例如：
- 动态添加或删除表单控件
- 处理复杂的嵌套表单数据结构
- 使用自定义校验器和异步校验器进行表单验证
- 使用状态变化观察器监听表单控件状态的变化
如果你想深入学习 Reactive Forms，请参考官方文档：Reactive Forms
示例代码
下面是一个完整的示例代码，它包含了一个自定义验证器和一个使用 Reactive Forms 进行表单验证的组件：
------ - --------- - ---- ----------------
------ -
----------------
------------
----------
-----------------
------------
- ---- -----------------
-------- ------------------------- -------- ----------- -
------ --------- ----------------- ---------------- - ---- -- -
----- ----- - ------------- -- -------
-- ---------------------- --- --- -
------ - --------- ---- --
-
------ -----
--
-
------------
--------- --------------
--------- -
----- -------------------
--------------------
------ ---------------------- --
---- -------------------------------------------------- ---- ------- -----------
-------
--
--
------ ----- --------------- -
----- ----------
------------------- --- ------------ -
--------- - ---------------
----- ---- ---------
- ---------------------------------------------------------- --------
-------------------------------------------------------------------------------------