作为现代化前端开发的重要一环，表单是 Web 应用的基础功能之一。随着 Web 应用越来越复杂，表单也越来越复杂，给前端开发者带来了许多挑战。ngx-form 是一个 Angular 框架的 npm 包，旨在帮助前端开发者更容易地构建复杂的表单。
ngx-form 包的引用和安装
在使用 ngx-form 之前，我们需要确保已经安装了最新版本的 Angular CLI，以及在项目中已经安装了 Angular。
安装 ngx-form，可以在终端使用以下命令
npm install --save ngx-form
如何使用 ngx-form
为了创建一个表单，我们需要使用 ngx-form 组件，并且为每个表单控件添加一个指令。我们将需要导入几个东西：
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { FormValidationError } from 'ngx-form';我们需要创建一个 FormGroup 实例，每个 FormControl 对象表示表单中的一个控件并提供其验证规则。
-- -------------------- ---- -------
------------
--------- -----------
--------- -
----- -------------------
------ ------------ ------ ------------------------
---------------------------- ------------------------------------------------------------
------ --------------- --------- ---------------------------
---------------------------- ---------------------------------------------------------------
-------
-
--
------ ----- ------------ -
----- --------- - --- -----------
------ --- --------------- --------------------- -------------------
--------- --- --------------- --------------------
---
------------
------- -------------------- -------------------
- --
---------- -
-- ----------------- -
-- -- ---------
- ---- -
----- ----- - -----------------------------------------
-- -- --------- ---- -----
-
-
-在这个示例中，我们创建了两个 FormControl 实例分别表示 Email 和密码输入框，通过传入 Validators 到控件中定义了表单验证规则。
我们还创建了一个 form FormGroup 实例，用于保存所有的 FormControl 实例。在 onSubmit() 方法中，我们检查表单是否有效，如果无效，则使用 ngx-form 包的 FormValidationError 获取第一条表单验证错误。
错误处理
默认情况下，ngx-form 组件会根据表单的验证状态和错误信息来自动更新表单的样式和错误信息。当表单存在验证错误时，它会自动向表单控件添加一个特定的错误类来标记。
同时，ngx-form 包也提供了一个管理表单错误的类FormValidationError，它可以帮助开发者更加容易的处理表单验证错误信息。可以根据关键字来获取错误消息，例如：
const errorOnEmail = this.formValidationError.getError('email');
const errorOnPassword = this.formValidationError.getError('password');自定义错误消息
在某些情况下，开发者可能希望自定义错误消息，并且只在发生特定错误时才显示。在 ngx-form 中，可以将验证器中的错误消息定义为一个函数。该函数将接收 FormControl 实例并返回一个错误消息字符串。
-- -------------------- ---- -------
------------
--------- -----------
--------- -
----- -------------------
------ ------------ ------ ------------------------
----------------------------
-----------------------------
--------------- ------ ----- -- ------- --
-------------------------------
------ --------------- --------- ---------------------------
---------------------------- ---------------------------------------------------------------
-------
-
--
------ ----- ------------ -
----- --------- - --- -----------
------ --- --------------- --------------------- -------------------
--------- --- --------------- --------------------
---
-在这个示例中，我们通过在 ngx-form-validation-message 组件中将键值对添加到 messageMap 参数中，为 Email 控件定义了一个特定的错误消息。
总结
ngx-form 是一个非常有用的包，可以帮助前端开发者更容易地构建和验证表单，大大提高了开发效率。同时，由于 ngx-form 包提供了丰富的 API 和错误处理，我们可以更好地控制和处理表单验证错误信息。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055be081e8991b448d9899