Ember Formly 是一个基于 Ember.js 的 UI 库，用于快速生成表单，能够提供可自定义和可扩展的表单控件，并集成了表单验证功能。本文将介绍它的使用教程，内容详细、深入，并包含示例代码。
安装
在使用 Ember Formly 之前，需要确保已安装 Node.js 和 Ember CLI。之后，使用如下命令安装 Ember Formly：
ember install ember-formly
该命令将自动安装 Ember Formly 所需的所有依赖包。
使用
使用 Ember Formly 时，需要在模板（template）中使用 {{ember-formly}} 组件，同时还需要为 Formly 提供表单模型（model），表单模型是一组 Key-Value 对象，其中 Key 表示表单域的名称或 id，Value 则表示表单域的值或选项等信息。
以下是一个简单的表单示例：
{{#ember-formly model=formlyModel}}
{{formly-field modelKey='firstName' label='First Name'}}
{{formly-field modelKey='lastName' label='Last Name'}}
{{formly-field modelKey='email' label='E-Mail'}}
{{/ember-formly}}其中，formlyModel 就是我们所定义的表单模型，formly-field 是一个 Formly 提供的一个自定义组件。它接受一个 modelKey 属性，指向表单模型中的 Key 值，同时还可以提供一些其他属性，如 label、required 等。
定义表单模型：
-- -------------------- ---- -------
------ --------- ---- -------------------
------ ------- ------------------
------ -
--------------------------
----------------------- -
---------- ---
--------- ---
------ --
---
-
---以上代码演示了如何在组件的 init() 方法中定义表单模型，并绑定到模板中。
自定义指令
除了默认的表单组件外，Formly 还支持自定义表单组件。自定义指令可以映射实现特定的表单控件，例如输入框、复选框、单选框等。使用 Formly 的自定义指令，需要在组件中注册自定义指令并引用它。
以下是一个简单的自定义指令示例：
-- -------------------- ---- -------
-- ------------------------------------
------ ------ ---- ---------------------------------
------ ------ ---- ---------------------------------------------
------ ------- ---------------
------- -------
-------- --------
----- -------
------------------ ----------
------ ------------------ ----- ------ -------
-------------- -
----------------- --------------------
--
------------- -
-- -------------------- -- ------------- --- --- -
----------------------------------------
-
--
------------------ -
--------------------------
-----------------
--
-------------------- -
--------------------------
----------------
-
---以上代码演示了如何定义一个名为 formly-fancy-input 的自定义指令组件，它只是一个简单的带有样式的输入框。在此指令中，我们将 .tagName 定义为 input，.style 定义了一些 CSS 样式，.attributeBindings 定义了一些绑定属性。
在模板中引用自定义指令：
{{#ember-formly model=formlyModel}}
{{formly-field modelKey='firstName' label='First Name'}}
{{formly-field modelKey='lastName' label='Last Name'}}
{{#formly-field modelKey="email" label="E-Mail"}}
{{formly-fancy-input value=model}}
{{/formly-field}}
{{/ember-formly}}我们可以看到，在自定义指令中的 value 属性与表单模型中的 email 属性进行了绑定。
表单验证
Formly 提供了基础和自定义验证器，并且还支持异步验证，可以使用组件的 .valid 属性判断表单是否验证通过。以下是一个自定义的基础验证器示例：
-- -------------------- ---- -------
-- -----------------------
------ ------------- ---- ---------------------------------------
------ ------- ----------------------
--------------- -------- ------ -
-- ------------------- --- --- -
------ ------ -- ---------
- ---- -
------ -----
-
-
---以上代码演示了如何定义一个名为 email 的自定义验证器组件。我们使用 ember-cp-validations 库来创建验证器。
在 formly-field 中使用验证器：
{{#formly-field modelKey='email' label='E-Mail'}}
{{field-validator model=model creates=formlyCreates}}
{{/formly-field}}其中，field-validator 组件是一个默认提供的名为 formly-field-validator 的组件，由 formly-field 提供。它将自动匹配对应的验证器，并将验证结果返回到 creates 参数中。
然后，在自定义组件中可以通过 .valid 属性来获取表单验证结果：
-- -------------------- ---- -------
-- ------------------------------------
---------------- -
--------------------------
-- ------------------- -
-------------------------------- ---------
- ---- -
-------------------------------- -------
-
-以上代码演示了如何在自定义组件中使用 .valid 属性来判断表单是否验证通过，并根据表单验证结果来更新样式。
结语
本文介绍了 Ember Formly 的使用教程，包括安装、使用、自定义指令、表单验证等内容。希望对学习 Ember.js 和前端表单的读者有所帮助。完整的示例代码可以在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb17