Angular Formly是一个强大的AngularJS表单构建工具，它允许您使用声明性配置来定义表单，并且可以很容易地将表单绑定到数据模型。本文将向您介绍如何在前端项目中使用npm包 angular-formly。
安装和配置
安装angular-formly非常简单。只需打开您的终端，导航到您的项目目录并运行以下命令：
npm install angular-formly --save
安装成功后，请确保将它添加到您的应用程序模块中：
angular.module('myApp', ['formly']);现在，您已经成功地安装并配置了angular-formly，下面我们来看看如何使用它来创建动态表单。
创建表单
要创建表单，首先需要定义字段列表，然后将其传递给我们的表单模板。
字段列表示例
-- -------------------- ---- -------
-
-
---- -------
----- --------
---------------- -
------ -------
------------ ------ ---- ------
--------- ----
-
--
-
---- --------
----- --------
---------------- -
------ ------ ---------
------------ ------ -------
----- --------
--------- ----
-
--
-
---- ----------
----- -----------
---------------- -
------ ----------
------------ ------ ---- ---------
----- --
--------- ----
-
-
-在上面的示例中，我们定义了三个字段：名称、电子邮件和消息。每个字段都具有一个键、一种类型和一组模板选项。您可以根据需要添加或删除字段，以及自定义控件选项。
表单模板
<form ng-submit="vm.onSubmit()" novalidate>
<formly-form model="vm.model" fields="vm.fields">
<button type="submit" class="btn btn-primary">Submit</button>
</formly-form>
</form>上述表单模板中的model和fields是由控制器传递给模板的作用域变量。OnSubmit方法负责处理提交事件并更新模型。
现在，您已经创建了一个动态表单，接下来我们来看看如何将表单绑定到数据模型。
表单绑定
要将表单绑定到数据模型，请在控制器中定义一个名为model的对象，并将其传递给表单模板。
-- -------------------- ---- -------
-------------------------------------------------- ---------- -
--- -- - -----
-------- - ---
--------- - -
-- ------ ---- ---- ----
--
----------- - ---------- -
--------------------- ----------
--
---在上面的代码中，我们定义了一个带有空对象的vm.model和我们先前定义的字段列表vm.fields。当用户提交表单时，在控制台中打印出当前模型对象。
结论
Angular Formly是一个非常强大的AngularJS表单构建工具，它使得动态表单创建变得非常简单。在本文中，我们介绍了如何使用npm包angular-formly来创建动态表单，并将其绑定到数据模型。希望这篇文章能够帮助您更深入地了解Angular Formly，并在您的项目中提供指导和启示。
完整代码请参考：https://github.com/formly-js/angular-formly
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/34215