简介
angular-formly-material 是一个基于 AngularJS 框架和 Material Design 风格的表单组件库，提供了一种简便的方式来创建可重用、可定制化的表单组件。本文将详细介绍 angular-formly-material 的使用，并附有示例代码。
安装
首先需要安装 Node.js 和 npm，然后在项目根目录下执行以下命令：
npm install angular-formly angular-formly-templates-material --save
这条命令会安装 angular-formly 和 angular-formly-templates-material 两个 npm 包并保存到 package.json 文件中。
使用
引入模块
在 AngularJS 的应用程序中，可以通过以下方式引入 angular-formly 和 angular-formly-templates-material 模块：
angular.module('myApp', ['formly', 'formlyMaterial']);创建表单
接下来，需要定义表单的结构和字段列表。这些信息可以以 JSON 的形式传递给 formly-form 指令：
<formly-form model="vm.model" fields="vm.fields" options="vm.options"></formly-form>
其中，vm.fields 是一个包含表单字段列表的数组，每个元素包含字段名称、类型、模板等信息。下面是一个简单的例子：
-- -------------------- ---- -------
--------- - -
-
---- ------------
----- --------
---------------- -
------ ------ -----
-
--
-
---- -----------
----- --------
---------------- -
------ ----- -----
-
-
--可以看到，每个字段都有一个唯一的 key 属性，用于标识该字段。type 属性指定了表单元素的类型，例如 input、textarea、radio 等等。templateOptions 中包含了模板所需的属性，例如 label、placeholder、required 等等。
自定义模板
如果默认模板无法满足需求，可以自定义模板以达到想要的效果。下面是一个简单的例子：
angular.module('myApp').run(function(formlyConfig) {
formlyConfig.setType({
name: 'customInput',
extends: 'input',
template: '<input ng-model="model[options.key]" placeholder="{{to.placeholder}}" class="{{to.className}}">'
});
});上述代码创建了一个名为 customInput 的自定义类型，继承自默认的 input 类型，并使用自定义的 HTML 模板。
配置选项
angular-formly-material 还提供了一些全局选项，例如主题颜色、错误样式等等。这些选项可以在应用程序启动时进行配置：
angular.module('myApp').config(function(formlyConfigProvider) {
formlyConfigProvider.setWrapper({
name: 'validation',
types: ['input', 'textarea'],
template: '<formly-transclude></formly-transclude><div ng-messages="fc.$error" ng-if="form.$submitted || options.formControl.$touched"><div ng-messages-include="some-custom-error-messages.html"></div></div>'
});
});上述代码创建了一个名为 validation 的包装器，用于将表单元素与错误消息关联起来。此包装器适用于 input 和 textarea 类型的表单元素，并使用自定义的 HTML 模板。
结论
angular-formly-material 是一个功能强大的表单组件库，可以帮助前端开发人员快速创建定制化的表单。本文介绍了 angular-formly-material 的安装、使用、自定义模板和配置选项等方面的知识，并附有示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/38860