在前端开发中，表单验证是必不可少的一部分。而针对文本输入的验证，如两次密码输入是否一致等，则是我们经常需要处理的情况。在这篇文章中，我将介绍一个非常实用的 npm 包 ngx-text-equality-validator，并提供详细的使用教程和示例代码。
什么是 ngx-text-equality-validator？
ngx-text-equality-validator 是一个 Angular 应用程序中的文本相等验证器，用于验证两个文本输入字段中的文本是否相同。它适用于 Angular 支持的所有版本（包括 Angular 10 和以上版本）。
除了判断两个文本输入框中的内容是否相同，该验证器还允许你比较大小写不敏感（可选），并且可以自定义错误消息进行更好的用户体验。
安装 ngx-text-equality-validator
安装 ngx-text-equality-validator 非常容易，只需在你的 Angular 项目中执行以下命令即可：
npm install ngx-text-equality-validator
这将在你的项目中添加一个 ngx-text-equality-validator 模块，并自动在你的应用程序中安装它。
使用 ngx-text-equality-validator
使用 ngx-text-equality-validator 很简单，只需按照以下步骤进行即可：
1. 导入 ngx-text-equality-validator 模块
在你的 Angular 组件中，打开你想要应用文本相等验证器的组件，并在开头加上以下导入语句：
import { EqualValidator } from 'ngx-text-equality-validator';2. 添加文本相等验证器
在你需要进行文本相等验证的文本输入框中，添加 equalValidator 指令即可。例如，如果你想验证两个密码输入框中的密码是否相同，可以像这样：
<input type="password" name="password" [(ngModel)]="password" required> <input type="password" name="confirmPassword" [(ngModel)]="confirmPassword" required equalValidator [equalValue]="password">
在上面的代码中，我们在第二个密码输入框中添加了 equalValidator 指令，并使用了 equalValue 属性来指定要与其进行比较的输入框（即第一个输入框，也就是密码输入框）。
3. 自定义错误消息
如果我们不希望使用默认的验证错误消息，我们可以为 equalValidator 指令使用 errorMessage 属性进行自定义。例如：
<input type="password" name="password" [(ngModel)]="password" required>
<input type="password" name="confirmPassword" [(ngModel)]="confirmPassword" required equalValidator [equalValue]="password"
errorMessage="两次密码输入不一致，请重新输入。">在上面的代码中，我们使用 errorMessage 属性来指定自定义错误消息。
4. 比较大小写
默认情况下，文本相等验证器是大小写敏感的。如果你希望在比较文本时忽略大小写，可以在 equalValidator 指令中使用 ignoreCase 属性。例如：
<input type="password" name="password" [(ngModel)]="password" required> <input type="password" name="confirmPassword" [(ngModel)]="confirmPassword" required equalValidator [equalValue]="password" ignoreCase="true">
在上面的代码中，我们在 equalValidator 指令中使用了 ignoreCase 属性，并将其设置为 true 以忽略大小写。
示例代码
下面是一个文本相等验证器的完整示例。我们将使用两个密码输入框进行演示。在检查两个输入框中输入的密码是否相同时，如果不相同，则会显示自定义的错误消息。
-- -------------------- ---- -------
---- ----------------------- ---
----- -------------------- ----------------------------------
------ --------------- --------------- ---------------------- ---------
------ --------------- ---------------------- ----------------------------- -------- -------------- -----------------------
--------------------------------
------- ------------- ------------------------------------------
--------- -------------------- ---- -------
-- ---------------------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------------
--------- -----------
------------ -------------------------
--
------ ----- ----------------- -
--------- -------
---------------- -------
-------------- ------- -
-- ------------
-
-结论
ngx-text-equality-validator 不仅是一个非常实用的文本相等验证器，而且易于使用、方便自定义，为我们在开发过程中提供了非常好的帮助。如果你正在进行 Angular 开发，并且需要进行文本相等验证，那么不妨试试 ngx-text-equality-validator 吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562d581e8991b448e02c5