npm 包 ngx-validator-extend 使用教程

什么是 ngx-validator-extend

ngx-validator-extend 是一个 Angular 表单验证工具，基于 Angular 自带的 FormGroup 和 FormControl，可以方便地给表单控件添加验证规则。同时，ngx-validator-extend 还支持自定义验证器，使得开发者可以根据自身需求随意定制表单验证规则。

ngx-validator-extend 如何使用

使用 ngx-validator-extend 需要以下步骤：

  1. 安装 ngx-validator-extend
--- ------- -------------------- ------
  1. 导入 ValidatorExtendModule

在需要使用表单验证的模块中，导入 ValidatorExtendModule：

-- -------------
------ - --------------------- - ---- -----------------------

-----------
  -------- -
    ---------------------
  -
--
------ ----- --------- --
  1. 创建 FormGroup

在组件中创建 FormGroup，表单控件可以使用 Angular 自带的 FormControl：

-- ----------------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------

------------
  --------- -----------
  ------------ ----------------------
--
------ ----- ------------ -
  --------- ----------

  ---------- -
    ------------- - --- -----------
      --------- --- --------------
      --------- --- -------------
    ---
  -
-
  1. 添加验证规则

使用 ValidatorExtend 提供的 Validators，可以方便地添加验证规则：

-- ----------------
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ---------- - ---- -----------------------

------------
  --------- -----------
  ------------ ----------------------
--
------ ----- ------------ -
  --------- ----------

  ---------- -
    ------------- - --- -----------
      --------- --- --------------- --------------------------------
      --------- --- --------------- ----------------------- --------------
    ---
  -
-

可以看到，Validators 的使用方式和 Angular 自带的 Validators 相同，可以传入验证规则和错误信息两个参数。

  1. 显示错误信息

在模板中，可以使用 Angular 自带的文本框控件和错误信息的指令，来方便地显示验证错误信息：

---- ------------------ ---
----- -----------------------
  -----
    -------------------
    ------ ----------- ---------------------------
    ---- -------------------------------------------- -- ------------------------------------ -- ----------------------------------------
      ---------------------------------------------
    ------
  ------
  -----
    ------------------
    ------ --------------- ---------------------------
    ---- -------------------------------------------- -- ------------------------------------ -- ----------------------------------------
      ---------------------------------------------
    ------
  ------
  ------- ------------- -----------------------------------------
-------

使用 ngIf 指令和 FormControl 的 errors 属性，判断表单控件是否验证失败，并显示错误信息。

自定义验证器

如果 Validators 提供的验证规则不满足需求，可以自定义验证器。自定义验证器有两种方式：

1. 函数验证器

可以直接传入验证函数来定义验证规则。验证函数需要返回一个对象，key 为错误代码，value 为错误信息：

------ -------- -------------------- ---------------- -
  ---------------- -- ------ ------------- --- --------- -
    ----- ----- - ---------------------
    ------ ------------ -- - - ---- - ----------- -----------
  -
-

2. 类验证器

可以定义一个类来实现验证规则，类中需要实现 Validator 接口，其中的 validate 方法就是验证规则：

------ ----- -------------- ---------- --------- -
  ----------------- ----------------- ------ -------- ---- - ---- -
    ---------------- -- ------ ------------- --- --------- -
      ----- ----- - --------------
      ------ ----- -- - -- ----- -- --- - ---- - ----------- ---- - - --- -----
    -
  -
-

在组件中使用自定义验证器：

------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------ - ----------- ---------- --------------- - ---- -----------------------

-------- -------------------- ---------------- -
  ---------------- -- ------ ------------- --- --------- -
    ----- ----- - ---------------------
    ------ ------------ -- - - ---- - ----------- -----------
  -
-

------ ----- -------------- ---------- --------- -
  ----------------- ----------------- ------ -------- ---- - ---- -
    ---------------- -- ------ ------------- --- --------- -
      ----- ----- - --------------
      ------ ----- -- - -- ----- -- --- - ---- - ----------- ---- - - --- -----
    -
  -
-

------------
  --------- -----------
  ------------ ----------------------
--
------ ----- ------------ -
  --------- ----------

  ---------- -
    ------------- - --- -----------
      --------- --- --------------- --------------------------------
      --------- --- --------------- ----------------------- ---------------
      ---- --- --------------- - ------------------------------ --- ---------------- ---
      ----- --- --------------- - ------------------------------ ----------- --
    ---
  -
-

总结

ngx-validator-extend 是 Angular 中非常好用的表单验证工具，支持丰富的验证规则，并可以方便地自定义验证器。使用 ngx-validator-extend 可以快速地实现表单验证，提高开发效率。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005730981e8991b448e934a

阅读全文

猜你喜欢

  • NPM 包 react-native-prop-style 使用教程

    概述 在 React Native 应用中，通常需要对组件进行样式设置。React Native 提供了一种称为 StyleSheet 的 API 来处理样式，但是在很多情况下，仍然需要使用一些非标准...

    3 年前
  • npm 包 easy-debounce 使用教程

    在 JavaScript 开发中，有时我们需要对一些高频触发的事件进行去抖操作，防止频繁触发操作，导致性能问题。在这种情况下，我们可以使用一个 npm 包 - easy-debounce。

    3 年前
  • npm 包 xecutive 使用教程

    在项目开发过程中，我们常常需要执行一些命令行操作，比如启动服务器、打包项目、部署应用等等。在 Node.js 中，我们可以使用 child_process 模块来执行这些命令，但是它的使用起来比较麻烦...

    3 年前
  • npm 包 electrode-redux-router-engine-redial 使用教程

    简介 随着 Web 应用技术的发展，前端的应用越来越复杂。针对这种情况，出现了许多框架和库。其中，Redux 是一个非常流行的状态管理库。Redux 的核心思想是将应用程序的状态储存在一个单一的、可预...

    3 年前
  • npm 包 formatversionnumber 使用教程

    在前端开发工作中，我们经常需要对应用程序的版本号进行管理。不仅仅是用于发布和分发，还有可能需要在应用程序运行期间对版本号进行处理或验证。为了更方便地对版本号进行操作，我们可以使用 npm 包 form...

    3 年前
  • npm 包 nodemailer-relay 使用教程

    简介 nodemailer-relay 是一个基于 Node.js 平台的 npm 包，它提供了一个简单易用的邮件中间件，使得用户可以直接将电子邮件通过 SMTP 协议发送到指定的邮件服务器。

    3 年前
  • npm 包 signalk-lcars 使用教程

    简介 signalk-lcars 是一个基于 React 的 UI 组件库，提供了一系列 LCARS 风格的 UI 组件。LCARS 是 Star Trek 中的一个虚构的计算机操作系统，具有现代感又...

    3 年前
  • npm 包 poloniex-api-js 使用教程

    Poloniex 是一家加密货币交易所，它提供了一个 API 让开发者可以通过编程的方式进行交易操作。poloniex-api-js 是一个基于 Poloniex API 封装的 npm 包，方便开发...

    3 年前
  • npm 包 entitymodel 使用教程

    在前端开发中，数据的处理是非常重要的一环，而管理和维护数据的方式显然不能仅仅依赖于基础语言的内置对象。为了更好地处理数据，开发者们会经常使用第三方库和框架，并且众多的 npm 包提供了丰富的解决方案。

    3 年前
  • npm包node-get-ascii的使用指南

    简介 node-get-ascii是一个用于将文本转换为ASCII艺术的Node.js模块。使用该模块可以将普通的文本转换为具有特殊格式的艺术字符，并进行自定义控制。

    3 年前
  • npm 包 sorry-randoms 使用教程

    前言 在前端开发中，难免会遇到需要产生随机数的情况，而 npm 上的 sorry-randoms 包能够轻松实现这一功能。本文将介绍如何使用 sorry-randoms 包，包括安装和基本用法，并分享...

    3 年前
  • npm 包 baie-fe-nunjucks-loader 使用教程

    在前端开发中，我们常常需要使用模板引擎来增强页面的可维护性和重用性。Nunjucks 是一个基于 JavaScript 的模板引擎，它支持模板继承、宏、过滤器等特性，被广泛运用于 Node.js 和浏...

    3 年前
  • npm 包 pico-stream 使用教程

    前言 在前端开发中，我们经常需要使用到流式处理数据的方法。这时候，pico-stream 这个 npm 包就可以为我们提供很大的帮助。本文将介绍 pico-stream 的使用方法，以及具体的应用场景...

    3 年前
  • npm 包 vue-sc-cli 使用教程

    前言 在前端开发过程中，我们经常需要建立 Vue.js 项目，更是需要遵循一些最佳实践。如果您想在某个项目中使用这样的实践，那么您需要开发自己的脚手架。不过，这个工作非常复杂。

    3 年前
  • npm 包 koa-better-proxies 使用教程

    Koa-better-proxies 是一个 Koa 框架下的 npm 包，它可以用于将 Koa 应用程序反向代理到其他服务器的中间件。它基于 Node.js 和 Koa 框架开发，它可以帮助前端开发...

    3 年前
  • npm 包 @ge-ge/utils 使用教程

    随着前端技术的进步和发展，npm 成为了前端开发中不可或缺的工具之一，同时也诞生了许多优秀的 npm 包。那么，本篇文章将介绍一个非常实用的前端 npm 包 @ge-ge/utils，这个库解决了很多...

    3 年前
  • npm 包 irajs-factory 使用教程

    介绍 irajs-factory 是一个 JavaScript 库，提供了创建和管理多个对象的工厂模式。它是使用 JSON Schema 进行配置的。 irajs-factory 在前端应用程序中非常...

    3 年前
  • npm 包 mppg 使用教程

    前言 Node.js 成为了前端工程师的重要基础，现在很多的前端库和框架都是用 JavaScript 编写的，并且都需要用到 Node.js 来进行构建和部署。npm 是 Node.js 的包管理工具...

    3 年前
  • npm 包 pcxcore-v2 使用教程

    前言 在前端开发中，我们经常需要使用 npm 包来实现某些功能，减少开发难度是一个很好的选择。而 pcxcore-v2 是一个非常有用、易用的 npm 包，据说是用于优化系统最多的 npm 包之一。

    3 年前
  • npm 包 serverless-cljs-plugin 使用教程

    介绍 serverless-cljs-plugin 是一个可以让你使用 ClojureScript 开发云函数（serverless）应用的 Serverless Framework 插件。

    3 年前

相关推荐

    暂无文章