在Web应用程序中，我们经常需要对用户输入进行校验以确保数据的准确性。Angular提供了一种非常简单而强大的方式来实现表单验证 - 自定义指令。
在这篇文章中，我们将学习如何使用Angular 2中的自定义指令来实现一个基本的确认密码校验，以确保两个密码字段匹配。
创建一个新的 Angular 2 应用程序
首先，我们需要创建一个新的Angular 2项目。如果您已经有一个现有的项目，则可以跳过此步骤。
ng new angular-password-confirmation-validation cd angular-password-confirmation-validation
创建一个带有确认密码的表单
接下来，我们需要创建一个带有密码和确认密码字段的表单。在 app.component.html 文件中添加以下代码：
-- -------------------- ---- -------
-----------------
------
-----
------ --------------------------------
------ --------------- ------------- ----------------
------
-----
------ ----------------------------- -----------------
------ --------------- -------------------- -----------------------
------
------- -----------------------------
-------创建自定义指令
我们需要创建一个自定义指令来验证密码和确认密码是否匹配。在Angular 2中，我们可以通过 @Directive 装饰器来定义指令。
ng generate directive password-confirmation
这将创建一个名为 PasswordConfirmationDirective 的新文件。在该文件中，我们需要实现 validate 方法来进行密码确认校验。
-- -------------------- ---- -------
------ - ---------- ----- - ---- ----------------
------ - ---------------- ---------- -------------- --------- - ---- -----------------
------------
--------- ----------------------------
---------- -- -------- -------------- ------------ ------------------------------ ------ ---- --
--
------ ----- ----------------------------- ---------- --------- -
--------------------------------- ---------- -------- - ---
----------------- ----------------- - ----- -------- --- - - ---- -
----- -------- - -------------------------------
----- --------------- - -------------------------------
-- --------- -- --------------- -- -------------- --- ---------------------- -
------ - ------------------- ---- --
-
------ -----
-
-在上面的代码中，我们首先使用@Directive 装饰器将指令与 appPasswordConfirmation选择器关联起来。接着我们还声明了 NG_VALIDATORS 注入令牌以注册验证器。
然后我们定义了一个 @Input 属性 passwords，用于存储两个密码字段的名称。在 validate 方法中，我们获取密码和确认密码控件的值，并比较它们是否相等。如果不相等，则返回一个 ‘passwordMismatch’ 错误对象。
在表单中使用自定义指令
现在我们已经创建了一个自定义指令，我们需要将其应用到密码和确认密码输入框中。
在 app.module.ts 文件中，我们需要导入 ReactiveFormsModule 并将自定义指令添加到 declarations 中。
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ------------------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ----------------------------- - ---- ------------------------------------ ----------- -------- --------------- --------------------- ------------- -------------- ------------------------------- ---------- --------------- -- ------ ----- --------- --
现在我们可以在密码和确认密码输入框中使用 appPasswordConfirmation 指令了。我们需要将两个字段的名称作为 @Input 传递给该指令。
-- -------------------- ---- -------
-----------------
----- ---------------------------
-----
------ --------------------------------
------ --------------- ------------- --------------- ---------------------------
------
-----
------ ----------------------------- -----------------
-
- --------------------------------------------------------- --------
------------------------------------------------------------------------------