在 Angular 中，我们可以使用内置的验证指令（如 required、minlength 等）为表单元素添加前端验证。但是，当我们需要创建自定义指令来扩展现有功能时，是否可以从代码中应用这些验证指令呢？
答案是肯定的！让我们看看如何在自定义指令中编程应用 Angular 验证指令。
原理
首先，让我们思考一下 Angular 验证指令是如何工作的。这些指令背后的原理是，在输入元素上设置特殊的属性（如 required、 minlength），并将这些属性与相应的验证器关联。然后，Angular 在处理表单时会检查这些属性，并根据其值运行相应的验证器。
因此，要在自定义指令中应用这些验证指令，我们需要做两件事：
- 将验证指令所需的属性添加到自定义指令的宿主元素上。
- 在需要进行验证的时候手动触发验证器。
接下来，我们将演示如何实现这些步骤。
示例
让我们通过一个例子来演示如何在自定义指令中编程应用 Angular 验证指令。在这个例子中，我们将创建一个自定义指令来验证两个密码字段是否匹配。
步骤 1：创建自定义指令
首先，我们需要创建一个自定义指令。我们将称之为 matchPassword，并将其应用于包含两个密码字段的表单。
------ ----------------------- ------ --------------- ----------------------- -------------- ---------------- ------ --------------- ----------------------------- -------------- ------- ----------------------------- -------
在 matchPassword 指令中，我们需要访问宿主元素中的两个密码字段。因此，我们将使用 @ViewChild 装饰器来获取这些元素。
------ - ---------- ----------- --------- - ---- ---------------- ------------ --------- ----------------- -- ------ ----- ---------------------- - ---------------------- --------------- ----------- ----------------------------- ---------------------- ----------- -
步骤 2：添加验证指令属性
接下来，我们需要将所需的验证指令属性添加到宿主元素中。在本例中，我们需要添加 required 和 pattern 属性。
----------------- - ----- --------------- - --------------------------------- ----- ---------------------- - ---------------------------------------- ------------------------ - ----- ------------------------------- - ----- ------------------------------ - ---------------------- -
请注意，我们是在 ngAfterViewInit 生命周期钩子函数中进行此操作。这是因为我们需要等到视图加载完成后才能获取元素的引用。
步骤 3：手动触发验证器
最后，我们需要在需要进行验证的时候手动触发验证器。在本例中，我们将使用 NgForm 中的 control 函数来获取表单控件，并手动运行其验证器。
------------------- ----- ------- --
----------------- -
-- ---
---------------------------------- -- -
----- -------- - ----------------------
----- --------------- - -----------------------------
-- --------- --- ---------------- -
------ - ---------------- ---- --
-
------ -----
---
-------------------------------------------
-这里，我们定义了一个简单的匿名函数作为验证器，并将其设置为表单控件的验证器。在这个函数中，我们检查两个密码字段是否相同，并根据需要返回错误对象或 null
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28743