在前端开发中，表单是非常常见和重要的组件之一。然而，编写和管理大型表单可能会变得非常繁琐和困难。为解决这个问题，我们可以使用 jarb-angular-formly 这个 npm 包来简化表单组件的编写。
什么是 jarb-angular-formly
jarb-angular-formly 是一个基于 AngularJS 的表单构建工具集合。它允许我们使用配置文件来定义表单的结构和字段属性，从而使表单构建变得更加高效和简单。
安装和使用 jarb-angular-formly
安装
我们可以使用 npm 命令进行安装：
npm install angular angular-formly jarb-angular-formly
使用
然后在 AngularJS 应用程序中引入 jarb-angular-formly：
angular.module('myApp', ['formly', 'formlyBootstrap', 'JarbAngularFormly']);现在我们就可以使用 jarb-formly 模块提供的组件和服务。
jarb-angular-formly 的配置
Formly 配置
将 jarb-angular-formly 引入 AngularJS 应用程序之后，我们需要进行一些配置才能使用它来帮助构建表单。这里我们用一个示例的配置参数来说明：
formlyConfigProvider.setType({
name: 'input',
templateUrl: 'input-template.html',
wrapper: ['bootstrapLabel', 'bootstrapHasError']
});这里我们定义了一个名为 input 的表单类型，使用了一个名为 input-template.html 的模板，并在渲染时使用了两个 wrapper：bootstrapLabel 和 bootstrapHasError。
Field 配置
在定义了表单的类型之后，我们需要对每个表单字段进行配置。下面是一个示例：
-- -------------------- ---- -------
-
---- -----------
----- --------
---------------- -
------ -----------
------------ ------ ---- ----------
--------- ----
-
-在这个示例中，我们定义了一个名为 username 的字段，它的类型是 input，并且我们为它设置了一些属性，如标签、占位符以及是否必填等。
使用示例
下面是一段使用 jarb-angular-formly 编写表单的示例：
-- -------------------- ---- -------
----------------------- ---------- ------------------ ---------------------
--------------------------- -
----------------------
----- --------
------------ ----------------------
-------- ------------------ --------------------
---
--
--------------------------- ---------------- -
------------- - -
-
---- -----------
----- --------
---------------- -
------ -----------
------------ ------ ---- ----------
--------- ----
-
--
-
---- -----------
----- --------
---------------- -
----- -----------
------ -----------
------------ ------ ---- ----------
--------- ----
-
--
-
----- -----------
---- -------------
---------------- -
------ --------- ---
-
-
--
---在上面的示例中，我们定义了一个 AngularJS 控制器，将表单的字段定义在 $scope.fields 上。在 HTML 模板中，我们使用了 formly 的指令来渲染表单：
<form ng-submit="submit()" novalidate> <formly-form model="model" fields="fields"></formly-form> <button class="btn btn-primary" type="submit">Submit</button> </form>
此时，当我们在页面中使用这个表单时，它会根据我们定义的 $scope.fields 中的配置来渲染出对应的表单元素，从而简化了我们的表单编写工作。
总结
在这篇文章中，我们介绍了 npm 包 jarb-angular-formly，它提供了基于 AngularJS 的表单构建工具，通过配置来简化表单的编写。我们了解了 jarb-angular-formly 的配置、使用方法和示例，并希望这篇文章对你在实践中使用这个工具包有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055aca81e8991b448d8633
