在前端开发中，表单是不可避免的。然而，编写复杂表单的过程通常非常麻烦，并且存在很多重复的代码。为了解决这个问题，我们可以使用一个叫做 ng-easy-form 的 npm 包，它基于 Angular，可以快速地创建漂亮的表单。
安装
要安装 ng-easy-form，可以使用以下命令：
npm install ng-easy-form --save
使用
要使用 ng-easy-form，我们首先需要 import 它：
-- -------------------- ---- -------
------ ---------- ---- ----------------
------ --------------- ---- ----------------------------
------ ------------- ---- -----------------
------ ---------------- ---- ---------------
------ -------------- ---- ------------------
-----------
------------- -
------------
--
-------- -
--------------
------------
--------------
--
---------- ---
---------- --------------
--
------ ----- --------- -
-在模板中，我们可以使用 easyForm 指令来创建表单，并使用 easyInput 指令来创建表单中的输入框：
-- -------------------- ---- -------
----- -------- ------------- -----------------------
---- ----------
--------------------
------ ----------- ------------------ ----------- ---------
------
---- ----------
---------------------
------ ------------ ------------------- ------------ ---------
------
------- -----------------------------
-------ng-easy-form 提供了很多指令，可以帮助我们快速创建表单，如 easySelect、easyCheckbox、easyRadio 等等。
深度
ng-easy-form 不仅可以帮助我们快速创建表单，还提供了很多高级功能，如表单验证、表单布局、自定义样式、表单分组等等。这些功能可以大大提高我们的开发效率。
表单验证
ng-easy-form 提供了强大的表单验证功能，可以让我们轻松地验证用户输入的数据。我们可以通过 easyInput 指令的 easyValidation 属性来设置验证规则：
<div easyInput [easyValidation]="{
'required': 'Please enter your name.',
'minlength': 'Name must be at least 3 characters long.'
}">
<label>Name:</label>
<input type="text" [(ngModel)]="name" name="name" required minlength="3">
<span easyValidationMessage></span>
</div>表单布局
ng-easy-form 还提供了非常方便的表单布局功能，可以让我们轻松地创建复杂的表单布局。我们可以通过 easyForm 指令的 easyLayout 属性来设置布局规则：
-- -------------------- ---- -------
----- -------- --------------------- ----------------------
------------ ------
---------- ----------------
-------- --------
---
---- --------- ----------------- --------------------
-------- ---
---
------------ -------------
------ ----------- ------------------- -------------
------
---- --------- ----------------- --------------------
-------- ---
---
----------- -------------
------ ----------- ------------------- -------------
------
---- --------- -------------------
---------------------
------ ------------ ------------------- -------------
------
------- -----------------------------
-------自定义样式
ng-easy-form 还提供了很多自定义样式的功能，可以让我们根据自己的需求自由地设置表单的样式。
表单分组
有时候，我们需要将表单分组，比如分成多个步骤。ng-easy-form 提供了非常方便的表单分组功能，可以让我们轻松地实现表单分组。
学习和指导意义
通过学习 ng-easy-form，我们可以学习到如何使用 Angular 框架来快速创建复杂的表单，并且可以学习到 Angular 中很多高级的功能。ng-easy-form 也可以作为我们日常工作中的工具，大大提高我们的开发效率。
同时，ng-easy-form 也可以帮助我们了解如何设计易用的 API，如何设计灵活的组件，如何构建高质量的 npm 包等等。这些都是我们作为软件开发人员必须掌握的技能。
示例代码
示例代码可以在 这里 查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005596481e8991b448d6e00