介绍
ember-form-object 是一款用于在 Ember.js 应用程序中创建表单对象的 npm 包，可以快速地创建表单，并使表单逻辑分离。使用 ember-form-object 可以更加方便地修改表单的逻辑和渲染方式。
安装
使用 npm 命令安装 ember-form-object：
$ npm install ember-form-object --save-dev
使用
使用 ember-form-object 需要创建 Ember Object 或者 Ember Data Model，并扩展 ember-form-object 在此基础上创建表单对象。
创建 Ember Object
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------
------ ------- ------------------------------- -
-- ------
------- -
------ -
----- -------
------ -----
------------ ------- ------------ ------ ------------ ------ ----
--
------------ -
----- -------
------ ----
--
--------- -
----- ---------
------ -----
-------- ------- -------- ----------
-
-
---创建 Ember Data Model
-- -------------------- ---- -------
------ -- ---- -------------
------ ---------- ---- --------------------
------ ------- --------------------------- -
-- ------
------- -
------ -
----- ---------
------ -----
------------ ------- ------------ ------ ------------ ------ ----
--
------------ -
----- ---------
------ ----
--
--------- -
----- ---------
------ -----
-------- ------- -------- ----------
-
-
---创建完成后，我们就可以在模板中使用表单组件 {{form-for}} 渲染表单了：
{{!-- 在 Ember Object 的模板中使用 --}}
{{form-for model update=(action "save") cancel=(action "cancel")}}
{{!-- 在 Ember Data Model 的模板中使用 --}}
{{form-for this update=(action "save") cancel=(action "cancel")}}表单字段类型
ember-form-object 支持以下类型的表单字段：
text
{
type: 'text', // 必填
label: '文本框', // 可选，表单字段名称，默认使用该 key
value: '', // 可选，表单字段值，默认为空字符串
validations: [{type: 'required'}, {type: 'maxLength', value: 10}] // 可选，表单字段验证规则
}textarea
{
type: 'textarea', // 必填
label: '文本域', // 可选，表单字段名称，默认使用该 key
value: '', // 可选，表单字段值，默认为空字符串
validations: [{type: 'required'}, {type: 'minLength', value: 10}] // 可选，表单字段验证规则
}select
{
type: 'select', // 必填
label: '下拉框', // 可选，表单字段名称，默认使用该 key
value: null, // 可选，表单字段值，默认为空
options: ['选项一', '选项二'], // 必填，下拉框选项列表
multiple: true // 可选，是否支持多选，默认为 false
}checkbox
{
type: 'checkbox', // 必填
label: '复选框', // 可选，表单字段名称，默认使用该 key
value: false // 可选，表单字段值，默认为 false
}radio
{
type: 'radio', // 必填
label: '单选框', // 可选，表单字段名称，默认使用该 key
value: null, // 可选，表单字段值，默认为空
options: ['选项一', '选项二'] // 必填，单选框选项列表
}表单验证规则
ember-form-object 内置了一些常用的表单验证规则：
required
必填项验证规则，如果表单字段为空，验证不通过。
validations: [{type: 'required'}]maxLength
最大长度验证规则，如果表单字段的长度超过最大长度限制，验证不通过。
validations: [{type: 'maxLength', value: 10}]minLength
最小长度验证规则，如果表单字段的长度不足最小长度限制，验证不通过。
validations: [{type: 'minLength', value: 2}]邮箱格式验证规则，如果表单字段不是邮箱格式，验证不通过。
validations: [{type: 'email'}]url
URL格式验证规则，如果表单字段不是URL格式，验证不通过。
validations: [{type: 'url'}]regex
正则表达式验证规则，通过正则表达式自定义验证表单字段。
validations: [{type: 'regex', value: /^[\u4E00-\u9F5A]+$/}]表单处理
在使用表单时，除了可以触发提交事件，还有其他一些常见的表单处理操作。
表单字段值改变事件
当表单字段值发生改变时，由 change 事件触发，可以获取到表单字段的值。
{{form-for model update=(action "save") cancel=(action "cancel") onChange=(action "fieldChanged")}}-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
------------------- ------ -
-- ------ ------
-- ------ ------
-
-
---取消表单操作
当用户点击取消按钮时，由 cancel 事件触发。
{{form-for model update=(action "save") cancel=(action "cancel")}}清空表单字段值
如果需要清空表单中的所有字段值，可以使用 clearFields 方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
----------- -
--------------------------------
-
-
---重置表单字段值
如果需要重新初始化表单的所有字段值，可以使用 resetFields 方法。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
----------- -
--------------------------------
-
-
---示例代码
下面是一个完整的示例，通过 ember-form-object 快速创建的表单：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------
------ ------- ------------------------------- -
-- ------
------- -
------ -
----- -------
------ -----
------ ---
------------ ------- ------------ ------ ------------ ------ ----
--
------------ -
----- -----------
------ -----
------ ---
------------ ------- ------------ ------ ------------ ------ ----
--
--------- -
----- ---------
------ -----
------ -----
-------- ------- -------- ----------
--
------- -
----- ---------
------ -----
--
-------- -
----- -----------
------ -------
------ -----
--
------- -
----- --------
------ -----
------ -----
-------- ----- ----
-
-
----- -------------------- ---- -------
---------- ----- -------------- ------- -------------- -----------
----- ------- ----
----------- ----- -------------- ------- -------------- --------- -- --------
------------- --------------- ----------- --------------
----- --------- ----
---------------
-------------
------- -------- ---------------------------
------- -------- ----------------------------- -------------------- ---- -------
------ ----- ---- --------
------ ------- -------------------------
-------- -
-------------- -
-- ----
--
-------- -
-- ----
--
------------------- ------ -
-- -------
--
----------- -
--------------------------------
--
----------- -
--------------------------------
-
-
---总结
本文介绍了如何使用 npm 包 ember-form-object 创建表单对象，通过自定义表单字段和验证规则，实现了快速创建表单的目的。同时，本文还演示了一些常见的表单处理操作，希望读者可以在此基础上扩展更多的表单功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e17a563576b7b1ecb03