From 0a916f73d19fd6236151e711c1c56865ff35a31e Mon Sep 17 00:00:00 2001
From: xxapp <552062803@qq.com>
Date: Wed, 14 Jun 2017 16:01:14 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20form=20=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ms-form/ms-form.md | 92 +++++++++++++++++++++++++++++++++++
 components/ms-form/ms-form.ts | 14 ------
 docs/nav.config.js            |  5 ++
 3 files changed, 97 insertions(+), 14 deletions(-)
 create mode 100644 components/ms-form/ms-form.md

diff --git a/components/ms-form/ms-form.md b/components/ms-form/ms-form.md
new file mode 100644
index 0000000..68111a8
--- /dev/null
+++ b/components/ms-form/ms-form.md
@@ -0,0 +1,92 @@
+## 表单组件
+
+### 带验证功能的表单
+
+```html
+<div :controller="doc-form-validate">
+    <xmp is="ms-form" :widget="{$form:@$form}">
+        <ms-form-item :widget="{label:'标题'}">
+            <ms-input :widget="{col:'title',$rules:{required:true}}"></ms-input>
+        </ms-form-item>
+        <ms-form-item :widget="{label:'内容'}">
+            <ms-textarea :widget="{col:'content',$rules:{required:true}}"></ms-textarea>
+        </ms-form-item>
+        <button type="button" class="btn btn-primary btn-sm" :click="@save">保存</button>
+    </xmp>
+    <pre>{{@json}}</pre>
+</div>
+```
+
+```js
+import * as avalon from 'avalon2';
+import { createForm, message } from 'ane';
+
+const vm = avalon.define({
+    $id: 'doc-form-validate',
+    json: '',
+    $form: createForm({
+        onFieldsChange(fields, record) {
+            vm.json = JSON.stringify(record);
+        }
+    }),
+    save() {
+        vm.$form.validateFields().then(isAllValid => {
+            if (isAllValid) {
+                message.success({
+                    content: '保存成功'
+                });
+            }
+        })
+    }
+});
+```
+
+### 用于搜索的表单
+
+```html
+<div :controller="doc-form-search">
+    <xmp is="ms-form" :widget="{$form:@$form,type:'search',inline:true}">
+        <ms-form-item :widget="{label:'标题：'}">
+            <ms-input :widget="{col:'title'}"></ms-input>
+        </ms-form-item>
+        <ms-form-item :widget="{label:'内容：'}">
+            <ms-input :widget="{col:'content'}"></ms-input>
+        </ms-form-item>
+        <button type="button" class="btn btn-primary btn-sm" :click="@save">搜索</button>
+    </xmp>
+    <pre>{{@json}}</pre>
+</div>
+```
+
+```js
+import * as avalon from 'avalon2';
+import { createForm, message } from 'ane';
+
+const vm1 = avalon.define({
+    $id: 'doc-form-search',
+    json: '',
+    $form: createForm({
+        onFieldsChange(fields, record) {
+            vm1.json = JSON.stringify(record);
+        }
+    }),
+    save() {
+        vm1.$form.validateFields().then(isAllValid => {
+            if (isAllValid) {
+                message.success({
+                    content: JSON.stringify(vm1.$form.record)
+                });
+            }
+        })
+    }
+});
+```
+
+### 组件参数
+
+| 参数 | 说明 | 类型 | 默认值 |
+|-----|-----|-----|-----|
+| $form | 表单数据集散中心 | createForm() | null |
+| type | 如果为 search，则只在表单项的值被用户手动修改时，才会加入到最后要提交的数据对象上，用于搜索表单 | string | '' |
+| horizontal | 是否添加 form-horizontal 到 class | boolean | false |
+| inline | 是否添加 form-inline 到 class | boolean | false |
\ No newline at end of file
diff --git a/components/ms-form/ms-form.ts b/components/ms-form/ms-form.ts
index 65ee2e3..cf72fee 100644
--- a/components/ms-form/ms-form.ts
+++ b/components/ms-form/ms-form.ts
@@ -1,20 +1,6 @@
 import * as avalon from 'avalon2';
 import { findParentComponent } from '../../ane-util';
 
-/**
- * Form组件
- * @prop $from 表单数据管理类
- * @prop type 如果为 search，则只在表单项的值被用户手动修改时，才会加入到最后要提交的数据对象上，用于搜索表单
- * @prop horizontal 是否添加 form-horizontal 到 class
- * @prop inline 是否添加 form-inline 到 class
- * 
- * @example
- * <ms-form>
- *   <ms-form-item :widget="{label: '标题'}">
-       <ms-input :widget="{value: @title, col: 'title'}"></ms-input>
-     </ms-form-item>
- * </ms-form>
- */
 avalon.component('ms-form', {
     template: `<form role="form" :class="[(@horizontal ? 'form-horizontal' : ''), (@inline ? 'form-inline' : '')]"><slot /></form>`,
     defaults: {
diff --git a/docs/nav.config.js b/docs/nav.config.js
index 1ffc2cd..353c128 100644
--- a/docs/nav.config.js
+++ b/docs/nav.config.js
@@ -16,5 +16,10 @@ module.exports = [{
         title: '表单控件',
         uri: '/form-control',
         location: 'ms-form/ms-control.md'
+    }, {
+        key: 'component-demo-form-form',
+        title: '表单',
+        uri: '/form',
+        location: 'ms-form/ms-form.md'
     }]
 }];
\ No newline at end of file