介绍
@ngx-validate/core 是一个用于构建前端表单验证的 npm 包，支持 Angular 项目。它提供了多种验证器，可以使表单验证变得更加简单、高效和可靠。
本文将介绍如何使用 @ngx-validate/core，在项目中快速构建表单验证功能。
安装
首先，我们需要在项目中安装 @ngx-validate/core 包。打开终端并输入以下命令：
npm install @ngx-validate/core --save
使用
使用该库需要在 app.module.ts 中引入 NgxValidateCoreModule 模块，并在组件中声明必要的变量和方法。
以下为示例代码：
import { NgxValidateCoreModule } from '@ngx-validate/core';
@NgModule({
imports: [
NgxValidateCoreModule
]
})
export class AppModule {}在组件中声明变量和验证器：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ---------------------- - ---- ---------------------
------------
--------- -----------
------------ ----------------------
--
------ ----- ------------ -
----- - ------
----- ----------
------------------- ----------------------- ----------------------- --
---------- -
--------- - --- -----------
----- --- --------------- -----------------------
------ --- --------------- --------------------- -------------------
--------- --- --------------- --------------------------
---
-
---------- -
-- ----------------- -
----------------- ------------
- ---- -
-------------------------------------------------------------
-
-
-在表单模板中，我们可以添加指令和绑定验证器：
-- -------------------- ---- -------
----- ------------------ ----------------------
---- -------------------
--------------------
------ ----------- -------------------- ---------------------- -----------------------------
---- --------------------------------- -- ------------------------- ------------ --------------
---- ----------------------------------------------- -- --------------
------
------
---- -------------------
---------------------
------ ------------ -------------------- ----------------------- --------------------------- ----------
---- ---------------------------------- -- -------------------------- ------------ --------------
---- ------------------------------------------------- -- --------------
---- ---------------------------------------------- -- --- -----------
------
------
---- -------------------
------------------------
------ --------------- -------------------- -------------------------- --------------------------------
---- ------------------------------------- -- ----------------------------- ------------ --------------
---- -------------------------------------------------------- ---- -- -- ----- - ---------- ----------
------
------
------- ------------- ---------- ------------ ----------------------------------------
-------以上代码展示了如何使用 @ngx-validate/core 进行基本的表单验证。在表单中，我们使用 [ngxValidate] 属性指令来绑定验证器，其中 required，email 和 minlength 是预定义的验证器。
通过 validateAllFormFields 方法可以在表单提交前进行验证，若存在错误则会显示出来。
总结
@ngx-validate/core 是一个非常实用的表单验证库，不仅简化了表单验证的操作，而且提供了多种预定义的验证器。通过本文的学习，我们学会了如何在 Angular 项目中使用该库，快速地构建出一个可靠的表单验证功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/193803