简介
ngx-model2form 是一个方便的 Angular 2+ 表单生成库，支持从模型中自动生成表单，并且能够很方便地处理表单的校验和提交等逻辑。本文将详细介绍如何使用 ngx-model2form 的各种功能。
安装
使用 npm 进行安装：
npm install ngx-model2form --save
使用
要使用 ngx-model2form，首先需要在模块中引入 NgxModel2FormModule：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ ------------------- - ---- -----------------
------ - ------------------- - ---- -----------------
-----------
-------- -
--------------
------------
--------------------
-------------------
--
------------- -
------------
--
---------- --------------
--
------ ----- --------- - -然后，在组件中使用 Model2Form 指令即可生成表单：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------ - ------------------- - ---- -----------------
------------
--------- -----------
--------- -
----- ------------------ -----------
---- ---- ---
-------
-
--
------ ----- ------------ -
----- ----------
------------------- --- ------------ -
-- ------
--------- - ----------
----- ---- ---------------------
------ ---- ------------------
--------- ---- ------------------------
---
-
-这样，一个包含 3 个字段的表单就创建好了。
表单验证
可以使用 Angular 的 Validators 功能对表单进行验证。在上面的示例中，我们已经使用了 Validators.required、Validators.email、Validators.minLength 等验证规则。
如果要自定义验证规则，可以使用自定义的校验器函数。例如，要验证两个密码字段是否一致，可以这样写：
-- -------------------- ---- -------
-------- ----------------------- ---------------- -
----- -------- - ------------------------
----- --------------- - -------------------------------
-- --------- -- ---------------- -
------ -------------- --- --------------------- - - --------------- ---- - - -----
-
------ -----
-
--------- - ----------
--------- ---- ---------------------
---------------- ---- ---------------------
-- -
---------- --------------
---此时，如果两个密码输入框的值不一致，表单就会失败校验。
表单提交
要查看表单的值，可以直接访问 form.value。例如，想要在提交表单时打印其值，可以这样写：
submitForm() {
console.log(this.form.value);
}如果表单中的某些字段被禁用或不需要提交，可以简单地将其从输出对象中删除即可。
submitForm() {
const values = { ...this.form.value };
delete values.email;
console.log(values);
}总结
以上就是 ngx-model2form 的使用教程，通过本文的学习，可以了解以下几点：
- ngx-model2form 是一个方便的 Angular 表单生成器
- 可以通过 Validators 进行表单验证
- 可以在表单模型中定义自定义验证规则和表单字段过滤逻辑
- 可以通过 form.value 获取表单的值
希望读者能够通过此文对 ngx-model2form 的使用有更深入的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005623181e8991b448df82a