前言
对于一个前端开发人员来说，开发表单是非常常见的任务。不过表单的开发一般需要编写冗长、重复的 HTML 和 JavaScript 代码。为了解决这个问题，我们可以使用一些工具来简化表单开发流程，例如使用 AngularJS 框架中的 ngFormly 库。
ngFormly 库提供了一种简单、灵活、可复用的方式来创建表单。而 formly 是 ngFormly 库的一个基于纯 JavaScript 的实现，可以被应用于任何前端框架，而不仅仅是 AngularJS。在本篇文章中，我们将详细介绍如何使用 formly 来创建表单。
安装和使用
为了使用 formly 库，我们需要首先使用 npm 来安装它。
npm install --save formly
一旦安装成功，我们就可以开始使用 formly 来创建表单啦！下面是一个简单的示例：
-- -------------------- ---- -------
------ - ------------ - ---- ---------
-----------
-------- -
-------------
--------------------
-------------------------
--
--
------ ----- --------- - -在上述代码中，我们首先引入了 FormlyModule 模块，然后在 AppModule 中使用 FormlyModule.forRoot({}) 方法来配置 formly。FormlyModule.forRoot({}) 方法接受一个对象作为参数，用来配置表单字段、验证、表单样式等等。在这个示例中，我们没有传入任何配置，所以 formly 将使用默认配置。
接下来，我们需要在组件中定义表单模型。表单模型是一个由字段和他们的属性组成的对象。下面是一个简单的表单模型示例：
-- -------------------- ---- -------
---- - --- --------------
------ ----- - -
------ ---
--------- ---
--
------ ------ - --
---- --------
----- --------
---------------- -
------ ------ ---------
------------ ------ -------
--------- -----
--
-- -
---- -----------
----- --------
---------------- -
----- -----------
------ -----------
------------ -----------
--------- -----
--
---在这个例子中，我们定义了一个包含两个输入框的表单模型，分别是 email 和 password。每个字段都有一个 key 属性，它用于在表单模型中来识别字段。type 属性指定了字段的类型，这里我们使用了 input 类型，它表示一个文本输入框。templateOptions 属性用来定义输入框的各种选项。
最后，我们需要在模版文件中使用 formly 来渲染表单模型。在模版文件中，我们可以使用 FormlyForm 组件来渲染表单模型。
<form [formGroup]="form" (ngSubmit)="onSubmit()"> <formly-form [form]="form" [model]="model" [fields]="fields"></formly-form> <button type="submit">Submit</button> </form>
在这个例子中，我们使用了一个 form 元素，并将其绑定到 FormGroup 对象。我们还使用了 FormlyForm 组件，并将表单模型、表单字段和 FormGroup 对象传递给了它。
现在，我们就完成了表单的创建！
结语
formly 库为开发者提供了一种简单、灵活、可复用的方式来创建表单。使用 formly，我们可以仅仅通过少量的 JavaScript 代码来创建表单。同时，formly 还提供了丰富的表单类型和选项，大大简化了表单开发的流程。在使用 formly 之后，你将更加专注于业务逻辑的开发，而不必再花费大量的时间编写冗长、重复的 HTML 和 JavaScript 代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551e781e8991b448cf594