1 line
156 KiB
JavaScript
1 line
156 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[0],{1267:function(e,t,a){},1268:function(e,t,a){},1269:function(e,t,a){},1270:function(e,t,a){},1271:function(e,t,a){},1272:function(e,t,a){},1273:function(e,t,a){},1366:function(e,t,a){"use strict";var n=a(1267);a.n(n).a},1367:function(e,t){},1368:function(e,t){},1369:function(e,t){},1370:function(e,t){},1371:function(e,t){},1372:function(e,t){},1373:function(e,t,a){"use strict";var n=a(1268);a.n(n).a},1374:function(e,t){},1375:function(e,t){},1376:function(e,t){},1377:function(e,t){},1378:function(e,t){},1379:function(e,t){},1380:function(e,t,a){"use strict";var n=a(1269);a.n(n).a},1381:function(e,t){},1382:function(e,t){},1383:function(e,t,a){"use strict";var n=a(1270);a.n(n).a},1384:function(e,t){},1385:function(e,t){},1386:function(e,t){},1387:function(e,t){},1388:function(e,t){},1389:function(e,t){},1390:function(e,t,a){"use strict";var n=a(1271);a.n(n).a},1391:function(e,t){},1392:function(e,t){},1393:function(e,t){},1394:function(e,t){},1395:function(e,t){},1396:function(e,t){},1397:function(e,t,a){"use strict";var n=a(1272);a.n(n).a},1398:function(e,t){},1399:function(e,t){},1400:function(e,t){},1401:function(e,t){},1402:function(e,t){},1403:function(e,t){},1404:function(e,t,a){"use strict";var n=a(1273);a.n(n).a},1420:function(e,t,a){"use strict";a.r(t);var n=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",{attrs:{id:"components-form-demo-advanced-search"}},[a("a-form",{staticClass:"ant-advanced-search-form",attrs:{form:e.form},on:{submit:e.handleSearch}},[a("a-row",{attrs:{gutter:24}},e._l(10,(function(t){return a("a-col",{key:t,style:{display:t<e.count?"block":"none"},attrs:{span:8}},[a("a-form-item",{attrs:{label:"Field "+t}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["field-"+t,{rules:[{required:!0,message:"Input something!"}]}],expression:"[\n `field-${i}`,\n {\n rules: [\n {\n required: true,\n message: 'Input something!',\n },\n ],\n },\n ]"}],attrs:{placeholder:"placeholder"}})],1)],1)})),1),e._v(" "),a("a-row",[a("a-col",{style:{textAlign:"right"},attrs:{span:24}},[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Search\n ")]),e._v(" "),a("a-button",{style:{marginLeft:"8px"},on:{click:e.handleReset}},[e._v("\n Clear\n ")]),e._v(" "),a("a",{style:{marginLeft:"8px",fontSize:"12px"},on:{click:e.toggle}},[e._v("\n Collapse "),a("a-icon",{attrs:{type:e.expand?"up":"down"}})],1)],1)],1)],1),e._v(" "),a("div",{staticClass:"search-result-list"},[e._v("\n Search Result List\n ")])],1)};n._withStripped=!0;var r={data:function(){return{expand:!1,form:this.$form.createForm(this,{name:"advanced_search"})}},computed:{count:function(){return this.expand?11:7}},methods:{handleSearch:function(e){e.preventDefault(),this.form.validateFields((function(e,t){console.log("error",e),console.log("Received values of form: ",t)}))},handleReset:function(){this.form.resetFields()},toggle:function(){this.expand=!this.expand}}},o=(a(1366),a(31)),s=a(1367),i=a.n(s),l=a(1368),v=a.n(l),d=Object(o.a)(r,n,[],!1,null,null,null);"function"==typeof i.a&&i()(d),"function"==typeof v.a&&v()(d),d.options.__file="components/form/demo/advanced-search.vue";var m=d.exports,c='<cn>\n#### 高级搜索\n三列栅格式的表单排列方式,常用于数据表格的高级搜索。\n有部分定制的样式代码,由于输入标签长度不确定,需要根据具体情况自行调整。\n</cn>\n\n<us>\n#### Advanced search\nThree columns layout is often used for advanced searching of data table.\nBecause the width of label is not fixed, you may need to adjust it by customizing its style.\n</us>\n\n<template>\n <div id="components-form-demo-advanced-search">\n <a-form class="ant-advanced-search-form" :form="form" @submit="handleSearch">\n <a-row :gutter="24">\n <a-col\n v-for="i in 10"\n :key="i"\n :span="8"\n :style="{ display: i < count ? \'block\' : \'none\' }"\n >\n <a-form-item :label="`Field ${i}`">\n <a-input\n v-decorator="[\n `field-${i}`,\n {\n rules: [\n {\n required: true,\n message: \'Input something!\',\n },\n ],\n },\n ]"\n placeholder="placeholder"\n />\n </a-form-item>\n </a-col>\n </a-row>\n <a-row>\n <a-col :span="24" :style="{ textAlign: \'right\' }">\n <a-button type="primary" html-type="submit">\n Search\n </a-button>\n <a-button :style="{ marginLeft: \'8px\' }" @click="handleReset">\n Clear\n </a-button>\n <a :style="{ marginLeft: \'8px\', fontSize: \'12px\' }" @click="toggle">\n Collapse <a-icon :type="expand ? \'up\' : \'down\'" />\n </a>\n </a-col>\n </a-row>\n </a-form>\n <div class="search-result-list">\n Search Result List\n </div>\n </div>\n</template>\n<script>\nexport default {\n data() {\n return {\n expand: false,\n form: this.$form.createForm(this, { name: \'advanced_search\' }),\n };\n },\n computed: {\n count() {\n return this.expand ? 11 : 7;\n },\n },\n methods: {\n handleSearch(e) {\n e.preventDefault();\n this.form.validateFields((error, values) => {\n console.log(\'error\', error);\n console.log(\'Received values of form: \', values);\n });\n },\n\n handleReset() {\n this.form.resetFields();\n },\n\n toggle() {\n this.expand = !this.expand;\n },\n },\n};\n<\/script>\n<style>\n.ant-advanced-search-form {\n padding: 24px;\n background: #fbfbfb;\n border: 1px solid #d9d9d9;\n border-radius: 6px;\n}\n\n.ant-advanced-search-form .ant-form-item {\n display: flex;\n}\n\n.ant-advanced-search-form .ant-form-item-control-wrapper {\n flex: 1;\n}\n\n#components-form-demo-advanced-search .ant-form {\n max-width: none;\n}\n#components-form-demo-advanced-search .search-result-list {\n margin-top: 16px;\n border: 1px dashed #e9e9e9;\n border-radius: 6px;\n background-color: #fafafa;\n min-height: 200px;\n text-align: center;\n padding-top: 80px;\n}\n</style>\n',u=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{form:e.form},on:{submit:e.handleSubmit}},[a("a-form-item",{attrs:{label:"Note","label-col":{span:5},"wrapper-col":{span:12}}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["note",{rules:[{required:!0,message:"Please input your note!"}]}],expression:"['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"}]})],1),e._v(" "),a("a-form-item",{attrs:{label:"Gender","label-col":{span:5},"wrapper-col":{span:12}}},[a("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["gender",{rules:[{required:!0,message:"Please select your gender!"}]}],expression:"[\n 'gender',\n { rules: [{ required: true, message: 'Please select your gender!' }] },\n ]"}],attrs:{placeholder:"Select a option and change input text above"},on:{change:e.handleSelectChange}},[a("a-select-option",{attrs:{value:"male"}},[e._v("\n male\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"female"}},[e._v("\n female\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{"wrapper-col":{span:12,offset:5}}},[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Submit\n ")])],1)],1)};u._withStripped=!0;var p={data:function(){return{formLayout:"horizontal",form:this.$form.createForm(this,{name:"coordinated"})}},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))},handleSelectChange:function(e){console.log(e),this.form.setFieldsValue({note:"Hi, "+("male"===e?"man":"lady")+"!"})}}},_=a(1369),f=a.n(_),h=a(1370),g=a.n(h),b=Object(o.a)(p,u,[],!1,null,null,null);"function"==typeof f.a&&f()(b),"function"==typeof g.a&&g()(b),b.options.__file="components/form/demo/coordinated.vue";var y=b.exports,w='<cn>\n#### 表单联动\n使用 `setFieldsValue` 来动态设置其他控件的值。\n</cn>\n\n<us>\n#### Coordinated Controls\nUse `setFieldsValue` to set other control\'s value programmaticly.\n</us>\n\n<template>\n <a-form :form="form" @submit="handleSubmit">\n <a-form-item label="Note" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">\n <a-input\n v-decorator="[\'note\', { rules: [{ required: true, message: \'Please input your note!\' }] }]"\n />\n </a-form-item>\n <a-form-item label="Gender" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">\n <a-select\n v-decorator="[\n \'gender\',\n { rules: [{ required: true, message: \'Please select your gender!\' }] },\n ]"\n placeholder="Select a option and change input text above"\n @change="handleSelectChange"\n >\n <a-select-option value="male">\n male\n </a-select-option>\n <a-select-option value="female">\n female\n </a-select-option>\n </a-select>\n </a-form-item>\n <a-form-item :wrapper-col="{ span: 12, offset: 5 }">\n <a-button type="primary" html-type="submit">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n formLayout: \'horizontal\',\n form: this.$form.createForm(this, { name: \'coordinated\' }),\n };\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n handleSelectChange(value) {\n console.log(value);\n this.form.setFieldsValue({\n note: `Hi, ${value === \'male\' ? \'man\' : \'lady\'}!`,\n });\n },\n },\n};\n<\/script>\n',F=function(){var e=this.$createElement,t=this._self._c||e;return t("a-form",{attrs:{layout:"inline",form:this.form},on:{submit:this.handleSubmit}},[t("a-form-item",{attrs:{label:"Price"}},[t("price-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["price",{initialValue:{number:0,currency:"rmb"},rules:[{validator:this.checkPrice}]}],expression:"[\n 'price',\n {\n initialValue: { number: 0, currency: 'rmb' },\n rules: [{ validator: checkPrice }],\n },\n ]"}]})],1),this._v(" "),t("a-form-item",[t("a-button",{attrs:{type:"primary","html-type":"submit"}},[this._v("\n Submit\n ")])],1)],1)};F._withStripped=!0;var C=a(2),k=a.n(C),x=function(e,t){return t in((e.$options||{}).propsData||{})},P={components:{PriceInput:{props:["value"],template:'\n <span>\n <a-input\n type=\'text\'\n :value="number"\n @change="handleNumberChange"\n style="width: 63%; margin-right: 2%;"\n />\n <a-select\n :value="currency"\n style="width: 32%"\n @change="handleCurrencyChange"\n >\n <a-select-option value=\'rmb\'>RMB</a-select-option>\n <a-select-option value=\'dollar\'>Dollar</a-select-option>\n </a-select>\n </span>\n ',data:function(){var e=this.value||{};return{number:e.number||0,currency:e.currency||"rmb"}},watch:{value:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.number=e.number||0,this.currency=e.currency||"rmb"}},methods:{handleNumberChange:function(e){var t=parseInt(e.target.value||0,10);isNaN(t)||(x(this,"value")||(this.number=t),this.triggerChange({number:t}))},handleCurrencyChange:function(e){x(this,"value")||(this.currency=e),this.triggerChange({currency:e})},triggerChange:function(e){this.$emit("change",k()({},this.$data,e))}}}},beforeCreate:function(){this.form=this.$form.createForm(this,{name:"customized_form_controls"})},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))},checkPrice:function(e,t,a){t.number>0?a():a("Price must greater than zero!")}}},j=a(1371),S=a.n(j),N=a(1372),L=a.n(N),I=Object(o.a)(P,F,[],!1,null,null,null);"function"==typeof S.a&&S()(I),"function"==typeof L.a&&L()(I),I.options.__file="components/form/demo/customized-form-controls.vue";var D=I.exports,V="<cn>\n#### 自定义表单控件\n自定义或第三方的表单控件,也可以与 Form 组件一起使用。只要该组件遵循以下的约定:\n> * 提供受控属性 `value` 或其它与 [`valuePropName`](/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的属性。\n> * 提供 `onChange` 事件或 [`trigger`](/components/form-cn/#getFieldDecorator(id,-options)-参数) 的值同名的事件。\n> * 不能是函数式组件。\n</cn>\n\n<us>\n#### Customized Form Controls\nCustomized or third-party form controls can be used in Form, too. Controls must follow these conventions:\n> * It has a controlled property `value` or other name which is equal to the value of [`valuePropName`](/components/form/#getFieldDecorator(id,-options)-parameters).\n> * It has event `onChange` or an event which name is equal to the value of [`trigger`](/components/form/#getFieldDecorator(id,-options)-parameters).\n> * It must be a class component.\n</us>\n\n<template>\n <a-form layout=\"inline\" :form=\"form\" @submit=\"handleSubmit\">\n <a-form-item label=\"Price\">\n <price-input\n v-decorator=\"[\n 'price',\n {\n initialValue: { number: 0, currency: 'rmb' },\n rules: [{ validator: checkPrice }],\n },\n ]\"\n />\n </a-form-item>\n <a-form-item>\n <a-button type=\"primary\" html-type=\"submit\">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nconst hasProp = (instance, prop) => {\n const $options = instance.$options || {};\n const propsData = $options.propsData || {};\n return prop in propsData;\n};\nconst PriceInput = {\n props: ['value'],\n template: `\n <span>\n <a-input\n type='text'\n :value=\"number\"\n @change=\"handleNumberChange\"\n style=\"width: 63%; margin-right: 2%;\"\n />\n <a-select\n :value=\"currency\"\n style=\"width: 32%\"\n @change=\"handleCurrencyChange\"\n >\n <a-select-option value='rmb'>RMB</a-select-option>\n <a-select-option value='dollar'>Dollar</a-select-option>\n </a-select>\n </span>\n `,\n data() {\n const value = this.value || {};\n return {\n number: value.number || 0,\n currency: value.currency || 'rmb',\n };\n },\n watch: {\n value(val = {}) {\n this.number = val.number || 0;\n this.currency = val.currency || 'rmb';\n },\n },\n methods: {\n handleNumberChange(e) {\n const number = parseInt(e.target.value || 0, 10);\n if (isNaN(number)) {\n return;\n }\n if (!hasProp(this, 'value')) {\n this.number = number;\n }\n this.triggerChange({ number });\n },\n handleCurrencyChange(currency) {\n if (!hasProp(this, 'value')) {\n this.currency = currency;\n }\n this.triggerChange({ currency });\n },\n triggerChange(changedValue) {\n // Should provide an event to pass value to Form.\n this.$emit('change', Object.assign({}, this.$data, changedValue));\n },\n },\n};\n\nexport default {\n components: {\n PriceInput,\n },\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: 'customized_form_controls' });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log('Received values of form: ', values);\n }\n });\n },\n checkPrice(rule, value, callback) {\n if (value.number > 0) {\n callback();\n return;\n }\n callback('Price must greater than zero!');\n },\n },\n};\n<\/script>\n",T=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{form:e.form},on:{submit:e.handleSubmit}},[e._l(e.form.getFieldValue("keys"),(function(t,n){return a("a-form-item",e._b({key:t,attrs:{label:0===n?"Passengers":"",required:!1}},"a-form-item",0===n?e.formItemLayout:e.formItemLayoutWithOutLabel,!1),[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["names["+t+"]",{validateTrigger:["change","blur"],rules:[{required:!0,whitespace:!0,message:"Please input passenger's name or delete this field."}]}],expression:"[\n `names[${k}]`,\n {\n validateTrigger: ['change', 'blur'],\n rules: [\n {\n required: true,\n whitespace: true,\n message: 'Please input passenger\\'s name or delete this field.',\n },\n ],\n },\n ]"}],staticStyle:{width:"60%","margin-right":"8px"},attrs:{placeholder:"passenger name"}}),e._v(" "),e.form.getFieldValue("keys").length>1?a("a-icon",{staticClass:"dynamic-delete-button",attrs:{type:"minus-circle-o",disabled:1===e.form.getFieldValue("keys").length},on:{click:function(){return e.remove(t)}}}):e._e()],1)})),e._v(" "),a("a-form-item",e._b({},"a-form-item",e.formItemLayoutWithOutLabel,!1),[a("a-button",{staticStyle:{width:"60%"},attrs:{type:"dashed"},on:{click:e.add}},[a("a-icon",{attrs:{type:"plus"}}),e._v(" Add field\n ")],1)],1),e._v(" "),a("a-form-item",e._b({},"a-form-item",e.formItemLayoutWithOutLabel,!1),[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Submit\n ")])],1)],2)};T._withStripped=!0;var $=0,q={data:function(){return{formItemLayout:{labelCol:{xs:{span:24},sm:{span:4}},wrapperCol:{xs:{span:24},sm:{span:20}}},formItemLayoutWithOutLabel:{wrapperCol:{xs:{span:24,offset:0},sm:{span:20,offset:4}}}}},beforeCreate:function(){this.form=this.$form.createForm(this,{name:"dynamic_form_item"}),this.form.getFieldDecorator("keys",{initialValue:[],preserve:!0})},methods:{remove:function(e){var t=this.form,a=t.getFieldValue("keys");1!==a.length&&t.setFieldsValue({keys:a.filter((function(t){return t!==e}))})},add:function(){var e=this.form,t=e.getFieldValue("keys").concat($++);e.setFieldsValue({keys:t})},handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))}}},E=(a(1373),a(1374)),Y=a.n(E),R=a(1375),z=a.n(R),M=Object(o.a)(q,T,[],!1,null,null,null);"function"==typeof Y.a&&Y()(M),"function"==typeof z.a&&z()(M),M.options.__file="components/form/demo/dynamic-form-item.vue";var A=M.exports,O='<cn>\n#### 动态增减表单项\n动态增加、减少表单项。\n</cn>\n\n<us>\n#### Dynamic Form Item\nAdd or remove form items dynamically.\n</us>\n\n<template>\n <a-form :form="form" @submit="handleSubmit">\n <a-form-item\n v-for="(k, index) in form.getFieldValue(\'keys\')"\n :key="k"\n v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"\n :label="index === 0 ? \'Passengers\' : \'\'"\n :required="false"\n >\n <a-input\n v-decorator="[\n `names[${k}]`,\n {\n validateTrigger: [\'change\', \'blur\'],\n rules: [\n {\n required: true,\n whitespace: true,\n message: \'Please input passenger\\\'s name or delete this field.\',\n },\n ],\n },\n ]"\n placeholder="passenger name"\n style="width: 60%; margin-right: 8px"\n />\n <a-icon\n v-if="form.getFieldValue(\'keys\').length > 1"\n class="dynamic-delete-button"\n type="minus-circle-o"\n :disabled="form.getFieldValue(\'keys\').length === 1"\n @click="() => remove(k)"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayoutWithOutLabel">\n <a-button type="dashed" style="width: 60%" @click="add">\n <a-icon type="plus" /> Add field\n </a-button>\n </a-form-item>\n <a-form-item v-bind="formItemLayoutWithOutLabel">\n <a-button type="primary" html-type="submit">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nlet id = 0;\nexport default {\n data() {\n return {\n formItemLayout: {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 4 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 20 },\n },\n },\n formItemLayoutWithOutLabel: {\n wrapperCol: {\n xs: { span: 24, offset: 0 },\n sm: { span: 20, offset: 4 },\n },\n },\n };\n },\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: \'dynamic_form_item\' });\n this.form.getFieldDecorator(\'keys\', { initialValue: [], preserve: true });\n },\n methods: {\n remove(k) {\n const { form } = this;\n // can use data-binding to get\n const keys = form.getFieldValue(\'keys\');\n // We need at least one passenger\n if (keys.length === 1) {\n return;\n }\n\n // can use data-binding to set\n form.setFieldsValue({\n keys: keys.filter(key => key !== k),\n });\n },\n\n add() {\n const { form } = this;\n // can use data-binding to get\n const keys = form.getFieldValue(\'keys\');\n const nextKeys = keys.concat(id++);\n // can use data-binding to set\n // important! notify form to detect changes\n form.setFieldsValue({\n keys: nextKeys,\n });\n },\n\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n },\n};\n<\/script>\n<style>\n.dynamic-delete-button {\n cursor: pointer;\n position: relative;\n top: 4px;\n font-size: 24px;\n color: #999;\n transition: all 0.3s;\n}\n.dynamic-delete-button:hover {\n color: #777;\n}\n.dynamic-delete-button[disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n}\n</style>\n',U=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{form:e.form}},[a("a-form-item",{attrs:{"label-col":e.formItemLayout.labelCol,"wrapper-col":e.formItemLayout.wrapperCol,label:"Name"}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["username",{rules:[{required:!0,message:"Please input your name"}]}],expression:"[\n 'username',\n { rules: [{ required: true, message: 'Please input your name' }] },\n ]"}],attrs:{placeholder:"Please input your name"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.formItemLayout.labelCol,"wrapper-col":e.formItemLayout.wrapperCol,label:"Nickname"}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["nickname",{rules:[{required:e.checkNick,message:"Please input your nickname"}]}],expression:"[\n 'nickname',\n { rules: [{ required: checkNick, message: 'Please input your nickname' }] },\n ]"}],attrs:{placeholder:"Please input your nickname"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.formTailLayout.labelCol,"wrapper-col":e.formTailLayout.wrapperCol}},[a("a-checkbox",{attrs:{checked:e.checkNick},on:{change:e.handleChange}},[e._v("\n Nickname is required\n ")])],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.formTailLayout.labelCol,"wrapper-col":e.formTailLayout.wrapperCol}},[a("a-button",{attrs:{type:"primary"},on:{click:e.check}},[e._v("\n Check\n ")])],1)],1)};U._withStripped=!0;var H={labelCol:{span:4},wrapperCol:{span:8}},W={labelCol:{span:4},wrapperCol:{span:8,offset:4}},B={data:function(){return{checkNick:!1,formItemLayout:H,formTailLayout:W,form:this.$form.createForm(this,{name:"dynamic_rule"})}},methods:{check:function(){this.form.validateFields((function(e){e||console.info("success")}))},handleChange:function(e){var t=this;this.checkNick=e.target.checked,this.$nextTick((function(){t.form.validateFields(["nickname"],{force:!0})}))}}},G=a(1376),J=a.n(G),Z=a(1377),K=a.n(Z),Q=Object(o.a)(B,U,[],!1,null,null,null);"function"==typeof J.a&&J()(Q),"function"==typeof K.a&&K()(Q),Q.options.__file="components/form/demo/dynamic-rule.vue";var X=Q.exports,ee='<cn>\n#### 动态校验规则\n根据不同情况执行不同的校验规则。\n</cn>\n\n<us>\n#### Dynamic Rules\nPerform different check rules according to different situations.\n</us>\n\n<template>\n <a-form :form="form">\n <a-form-item\n :label-col="formItemLayout.labelCol"\n :wrapper-col="formItemLayout.wrapperCol"\n label="Name"\n >\n <a-input\n v-decorator="[\n \'username\',\n { rules: [{ required: true, message: \'Please input your name\' }] },\n ]"\n placeholder="Please input your name"\n />\n </a-form-item>\n <a-form-item\n :label-col="formItemLayout.labelCol"\n :wrapper-col="formItemLayout.wrapperCol"\n label="Nickname"\n >\n <a-input\n v-decorator="[\n \'nickname\',\n { rules: [{ required: checkNick, message: \'Please input your nickname\' }] },\n ]"\n placeholder="Please input your nickname"\n />\n </a-form-item>\n <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">\n <a-checkbox :checked="checkNick" @change="handleChange">\n Nickname is required\n </a-checkbox>\n </a-form-item>\n <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">\n <a-button type="primary" @click="check">\n Check\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nconst formItemLayout = {\n labelCol: { span: 4 },\n wrapperCol: { span: 8 },\n};\nconst formTailLayout = {\n labelCol: { span: 4 },\n wrapperCol: { span: 8, offset: 4 },\n};\nexport default {\n data() {\n return {\n checkNick: false,\n formItemLayout,\n formTailLayout,\n form: this.$form.createForm(this, { name: \'dynamic_rule\' }),\n };\n },\n methods: {\n check() {\n this.form.validateFields(err => {\n if (!err) {\n console.info(\'success\');\n }\n });\n },\n handleChange(e) {\n this.checkNick = e.target.checked;\n this.$nextTick(() => {\n this.form.validateFields([\'nickname\'], { force: true });\n });\n },\n },\n};\n<\/script>\n',te=function(){var e=this.$createElement,t=this._self._c||e;return t("div",[t("a-button",{attrs:{type:"primary"},on:{click:this.showModal}},[this._v("\n New Collection\n ")]),this._v(" "),t("collection-create-form",{ref:"collectionForm",attrs:{visible:this.visible},on:{cancel:this.handleCancel,create:this.handleCreate}})],1)};te._withStripped=!0;var ae={components:{CollectionCreateForm:{props:["visible"],beforeCreate:function(){this.form=this.$form.createForm(this,{name:"form_in_modal"})},template:"\n <a-modal\n :visible=\"visible\"\n title='Create a new collection'\n okText='Create'\n @cancel=\"() => { $emit('cancel') }\"\n @ok=\"() => { $emit('create') }\"\n >\n <a-form layout='vertical' :form=\"form\">\n <a-form-item label='Title'>\n <a-input\n v-decorator=\"[\n 'title',\n {\n rules: [{ required: true, message: 'Please input the title of collection!' }],\n }\n ]\"\n />\n </a-form-item>\n <a-form-item label='Description'>\n <a-input\n type='textarea'\n v-decorator=\"['description']\"\n />\n </a-form-item>\n <a-form-item class='collection-create-form_last-form-item'>\n <a-radio-group\n v-decorator=\"[\n 'modifier',\n {\n initialValue: 'private',\n }\n ]\"\n >\n <a-radio value='public'>Public</a-radio>\n <a-radio value='private'>Private</a-radio>\n </a-radio-group>\n </a-form-item>\n </a-form>\n </a-modal>\n "}},data:function(){return{visible:!1}},methods:{showModal:function(){this.visible=!0},handleCancel:function(){this.visible=!1},handleCreate:function(){var e=this,t=this.$refs.collectionForm.form;t.validateFields((function(a,n){a||(console.log("Received values of form: ",n),t.resetFields(),e.visible=!1)}))}}},ne=a(1378),re=a.n(ne),oe=a(1379),se=a.n(oe),ie=Object(o.a)(ae,te,[],!1,null,null,null);"function"==typeof re.a&&re()(ie),"function"==typeof se.a&&se()(ie),ie.options.__file="components/form/demo/form-in-modal.vue";var le=ie.exports,ve="<cn>\n#### 弹出层中的新建表单\n当用户访问一个展示了某个列表的页面,想新建一项但又不想跳转页面时,可以用 Modal 弹出一个表单,用户填写必要信息后创建新的项。\n</cn>\n\n<us>\n#### Form in Modal to Create\nWhen user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.\n</us>\n\n<template>\n <div>\n <a-button type=\"primary\" @click=\"showModal\">\n New Collection\n </a-button>\n <collection-create-form\n ref=\"collectionForm\"\n :visible=\"visible\"\n @cancel=\"handleCancel\"\n @create=\"handleCreate\"\n />\n </div>\n</template>\n\n<script>\nconst CollectionCreateForm = {\n props: ['visible'],\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: 'form_in_modal' });\n },\n template: `\n <a-modal\n :visible=\"visible\"\n title='Create a new collection'\n okText='Create'\n @cancel=\"() => { $emit('cancel') }\"\n @ok=\"() => { $emit('create') }\"\n >\n <a-form layout='vertical' :form=\"form\">\n <a-form-item label='Title'>\n <a-input\n v-decorator=\"[\n 'title',\n {\n rules: [{ required: true, message: 'Please input the title of collection!' }],\n }\n ]\"\n />\n </a-form-item>\n <a-form-item label='Description'>\n <a-input\n type='textarea'\n v-decorator=\"['description']\"\n />\n </a-form-item>\n <a-form-item class='collection-create-form_last-form-item'>\n <a-radio-group\n v-decorator=\"[\n 'modifier',\n {\n initialValue: 'private',\n }\n ]\"\n >\n <a-radio value='public'>Public</a-radio>\n <a-radio value='private'>Private</a-radio>\n </a-radio-group>\n </a-form-item>\n </a-form>\n </a-modal>\n `,\n};\n\nexport default {\n components: { CollectionCreateForm },\n data() {\n return {\n visible: false,\n };\n },\n methods: {\n showModal() {\n this.visible = true;\n },\n handleCancel() {\n this.visible = false;\n },\n handleCreate() {\n const form = this.$refs.collectionForm.form;\n form.validateFields((err, values) => {\n if (err) {\n return;\n }\n console.log('Received values of form: ', values);\n form.resetFields();\n this.visible = false;\n });\n },\n },\n};\n<\/script>\n",de=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"components-form-demo-global-state"}},[t("customized-form",{attrs:{username:this.fields.username},on:{change:this.handleFormChange}}),this._v(" "),t("pre",{staticClass:"language-bash"},[this._v(" "+this._s(JSON.stringify(this.fields,null,2))+"\n ")])],1)};de._withStripped=!0;var me={components:{CustomizedForm:{props:["username"],template:"\n <a-form layout='inline' :form=\"form\">\n <a-form-item label='Username'>\n <a-input\n v-decorator=\"[\n 'username',\n {\n rules: [{ required: true, message: 'Username is required!' }],\n }\n ]\"\n />\n </a-form-item>\n </a-form>\n ",created:function(){var e=this;this.form=this.$form.createForm(this,{name:"global_state",onFieldsChange:function(t,a){e.$emit("change",a)},mapPropsToFields:function(){return{username:e.$form.createFormField(k()({},e.username,{value:e.username.value}))}},onValuesChange:function(e,t){console.log(t)}})},watch:{username:function(){this.form.updateFields({username:this.$form.createFormField(k()({},this.username,{value:this.username.value}))})}}}},data:function(){return{fields:{username:{value:"benjycui"}}}},methods:{handleFormChange:function(e){console.log("changedFields",e),this.fields=k()({},this.fields,e)}}},ce=(a(1380),a(1381)),ue=a.n(ce),pe=a(1382),_e=a.n(pe),fe=Object(o.a)(me,de,[],!1,null,null,null);"function"==typeof ue.a&&ue()(fe),"function"==typeof _e.a&&_e()(fe),fe.options.__file="components/form/demo/global-state.vue";var he=fe.exports,ge="<cn>\n#### 表单数据存储于上层组件\n通过使用 `onFieldsChange` 与 `mapPropsToFields`,可以把表单的数据存储到上层组件。\n**注意:**\n`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。\n如果你使用`Form.create`,上层组件传递的属性,必须在`Form.create({ props: ...})`的props中声明。\n如果使用`this.$form.createForm`,你可以使用任何数据,不仅仅局限于上层组件的属性。\n</cn>\n\n<us>\n#### Store Form Data into Upper Component\nWe can store form data into upper component.\n**Note:**\nIf you use `Form.create`. You must wrap field data with `Form.createFormField` in `mapPropsToFields`.\nThe properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`.\nBut if you use `this.$form.createForm`, You can use any data, not just the properties of the upper components.\n</us>\n\n<template>\n <div id=\"components-form-demo-global-state\">\n <customized-form :username=\"fields.username\" @change=\"handleFormChange\" />\n <pre class=\"language-bash\">\n {{ JSON.stringify(fields, null, 2) }}\n </pre>\n </div>\n</template>\n\n<script>\nconst CustomizedForm = {\n props: ['username'],\n template: `\n <a-form layout='inline' :form=\"form\">\n <a-form-item label='Username'>\n <a-input\n v-decorator=\"[\n 'username',\n {\n rules: [{ required: true, message: 'Username is required!' }],\n }\n ]\"\n />\n </a-form-item>\n </a-form>\n `,\n created() {\n this.form = this.$form.createForm(this, {\n name: 'global_state',\n onFieldsChange: (_, changedFields) => {\n this.$emit('change', changedFields);\n },\n mapPropsToFields: () => {\n return {\n username: this.$form.createFormField({\n ...this.username,\n value: this.username.value,\n }),\n };\n },\n onValuesChange(_, values) {\n console.log(values);\n },\n });\n },\n watch: {\n username() {\n this.form.updateFields({\n username: this.$form.createFormField({\n ...this.username,\n value: this.username.value,\n }),\n });\n },\n },\n};\n\nexport default {\n components: {\n CustomizedForm,\n },\n data() {\n return {\n fields: {\n username: {\n value: 'benjycui',\n },\n },\n };\n },\n methods: {\n handleFormChange(changedFields) {\n console.log('changedFields', changedFields);\n this.fields = { ...this.fields, ...changedFields };\n },\n },\n};\n<\/script>\n<style>\n#components-form-demo-global-state .language-bash {\n max-width: 400px;\n border-radius: 6px;\n margin-top: 24px;\n}\n</style>\n",be=function(){var e=this.$createElement,t=this._self._c||e;return t("div",{attrs:{id:"components-form-demo-vuex"}},[t("a-form",{attrs:{form:this.form},on:{submit:this.handleSubmit}},[t("a-form-item",{attrs:{label:"Username"}},[t("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["username",{rules:[{required:!0,message:"Username is required!"}]}],expression:"[\n 'username',\n {\n rules: [{ required: true, message: 'Username is required!' }],\n },\n ]"}]})],1),this._v(" "),t("a-button",{attrs:{type:"primary","html-type":"submit"}},[this._v("\n Submit\n ")])],1)],1)};be._withStripped=!0;var ye={computed:{username:function(){return this.$store.state.username}},watch:{username:function(e){console.log("this.$store.state.username: ",e),this.form.setFieldsValue({username:e})}},created:function(){var e=this;this.form=this.$form.createForm(this,{onFieldsChange:function(t,a){e.$emit("change",a)},mapPropsToFields:function(){return{username:e.$form.createFormField({value:e.username})}},onValuesChange:function(e,t){console.log(t)}})},methods:{handleSubmit:function(e){var t=this;e.preventDefault(),this.form.validateFields((function(e,a){e||(console.log("Received values of form: ",a),t.$store.commit("update",a))}))}}},we=(a(1383),a(1384)),Fe=a.n(we),Ce=a(1385),ke=a.n(Ce),xe=Object(o.a)(ye,be,[],!1,null,null,null);"function"==typeof Fe.a&&Fe()(xe),"function"==typeof ke.a&&ke()(xe),xe.options.__file="components/form/demo/vuex.vue";var Pe=xe.exports,je="<cn>\n#### 表单数据存储于 Vuex Store 中\n通过使用 onFieldsChange 与 mapPropsToFields,可以把表单的数据存储到 Vuex 中。\n**注意:**\n`mapPropsToFields` 里面返回的表单域数据必须使用 `Form.createFormField` 包装。\n</cn>\n\n<us>\n#### Store Form Data into Vuex Store\nWe can store form data into Vuex Store.\n**Note:**\nYou must wrap field data with `Form.createFormField` in `mapPropsToFields`.\n</us>\n\n<template>\n <div id=\"components-form-demo-vuex\">\n <a-form :form=\"form\" @submit=\"handleSubmit\">\n <a-form-item label=\"Username\">\n <a-input\n v-decorator=\"[\n 'username',\n {\n rules: [{ required: true, message: 'Username is required!' }],\n },\n ]\"\n />\n </a-form-item>\n <a-button type=\"primary\" html-type=\"submit\">\n Submit\n </a-button>\n </a-form>\n </div>\n</template>\n\n<script>\nexport default {\n computed: {\n username() {\n return this.$store.state.username;\n },\n },\n watch: {\n username(val) {\n console.log('this.$store.state.username: ', val);\n this.form.setFieldsValue({ username: val });\n },\n },\n created() {\n this.form = this.$form.createForm(this, {\n onFieldsChange: (_, changedFields) => {\n this.$emit('change', changedFields);\n },\n mapPropsToFields: () => {\n return {\n username: this.$form.createFormField({\n value: this.username,\n }),\n };\n },\n onValuesChange: (_, values) => {\n console.log(values);\n // Synchronize to vuex store in real time\n // this.$store.commit('update', values)\n },\n });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log('Received values of form: ', values);\n this.$store.commit('update', values);\n }\n });\n },\n },\n};\n<\/script>\n<style>\n#components-form-demo-vuex .language-bash {\n max-width: 400px;\n border-radius: 6px;\n margin-top: 24px;\n}\n</style>\n",Se=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{layout:"inline",form:e.form},on:{submit:e.handleSubmit}},[a("a-form-item",{attrs:{"validate-status":e.userNameError()?"error":"",help:e.userNameError()||""}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["userName",{rules:[{required:!0,message:"Please input your username!"}]}],expression:"[\n 'userName',\n { rules: [{ required: true, message: 'Please input your username!' }] },\n ]"}],attrs:{placeholder:"Username"}},[a("a-icon",{staticStyle:{color:"rgba(0,0,0,.25)"},attrs:{slot:"prefix",type:"user"},slot:"prefix"})],1)],1),e._v(" "),a("a-form-item",{attrs:{"validate-status":e.passwordError()?"error":"",help:e.passwordError()||""}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["password",{rules:[{required:!0,message:"Please input your Password!"}]}],expression:"[\n 'password',\n { rules: [{ required: true, message: 'Please input your Password!' }] },\n ]"}],attrs:{type:"password",placeholder:"Password"}},[a("a-icon",{staticStyle:{color:"rgba(0,0,0,.25)"},attrs:{slot:"prefix",type:"lock"},slot:"prefix"})],1)],1),e._v(" "),a("a-form-item",[a("a-button",{attrs:{type:"primary","html-type":"submit",disabled:e.hasErrors(e.form.getFieldsError())}},[e._v("\n Log in\n ")])],1)],1)};function Ne(e){return Object.keys(e).some((function(t){return e[t]}))}Se._withStripped=!0;var Le={data:function(){return{hasErrors:Ne,form:this.$form.createForm(this,{name:"horizontal_login"})}},mounted:function(){var e=this;this.$nextTick((function(){e.form.validateFields()}))},methods:{userNameError:function(){var e=this.form,t=e.getFieldError;return(0,e.isFieldTouched)("userName")&&t("userName")},passwordError:function(){var e=this.form,t=e.getFieldError;return(0,e.isFieldTouched)("password")&&t("password")},handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))}}},Ie=a(1386),De=a.n(Ie),Ve=a(1387),Te=a.n(Ve),$e=Object(o.a)(Le,Se,[],!1,null,null,null);"function"==typeof De.a&&De()($e),"function"==typeof Te.a&&Te()($e),$e.options.__file="components/form/demo/horizontal-login.vue";var qe=$e.exports,Ee='<cn>\n#### 水平登录栏\n水平登录栏,常用在顶部导航栏中。\n</cn>\n\n<us>\n#### Horizontal Login Form\nHorizontal login form is often used in navigation bar.\n</us>\n\n<template>\n <a-form layout="inline" :form="form" @submit="handleSubmit">\n <a-form-item :validate-status="userNameError() ? \'error\' : \'\'" :help="userNameError() || \'\'">\n <a-input\n v-decorator="[\n \'userName\',\n { rules: [{ required: true, message: \'Please input your username!\' }] },\n ]"\n placeholder="Username"\n >\n <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />\n </a-input>\n </a-form-item>\n <a-form-item :validate-status="passwordError() ? \'error\' : \'\'" :help="passwordError() || \'\'">\n <a-input\n v-decorator="[\n \'password\',\n { rules: [{ required: true, message: \'Please input your Password!\' }] },\n ]"\n type="password"\n placeholder="Password"\n >\n <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />\n </a-input>\n </a-form-item>\n <a-form-item>\n <a-button type="primary" html-type="submit" :disabled="hasErrors(form.getFieldsError())">\n Log in\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nfunction hasErrors(fieldsError) {\n return Object.keys(fieldsError).some(field => fieldsError[field]);\n}\nexport default {\n data() {\n return {\n hasErrors,\n form: this.$form.createForm(this, { name: \'horizontal_login\' }),\n };\n },\n mounted() {\n this.$nextTick(() => {\n // To disabled submit button at the beginning.\n this.form.validateFields();\n });\n },\n methods: {\n // Only show error after a field is touched.\n userNameError() {\n const { getFieldError, isFieldTouched } = this.form;\n return isFieldTouched(\'userName\') && getFieldError(\'userName\');\n },\n // Only show error after a field is touched.\n passwordError() {\n const { getFieldError, isFieldTouched } = this.form;\n return isFieldTouched(\'password\') && getFieldError(\'password\');\n },\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n },\n};\n<\/script>\n',Ye=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("a-form",{attrs:{layout:e.formLayout}},[a("a-form-item",{attrs:{label:"Form Layout","label-col":e.formItemLayout.labelCol,"wrapper-col":e.formItemLayout.wrapperCol}},[a("a-radio-group",{attrs:{"default-value":"horizontal"},on:{change:e.handleFormLayoutChange}},[a("a-radio-button",{attrs:{value:"horizontal"}},[e._v("\n Horizontal\n ")]),e._v(" "),a("a-radio-button",{attrs:{value:"vertical"}},[e._v("\n Vertical\n ")]),e._v(" "),a("a-radio-button",{attrs:{value:"inline"}},[e._v("\n Inline\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Field A","label-col":e.formItemLayout.labelCol,"wrapper-col":e.formItemLayout.wrapperCol}},[a("a-input",{attrs:{placeholder:"input placeholder"}})],1),e._v(" "),a("a-form-item",{attrs:{label:"Field B","label-col":e.formItemLayout.labelCol,"wrapper-col":e.formItemLayout.wrapperCol}},[a("a-input",{attrs:{placeholder:"input placeholder"}})],1),e._v(" "),a("a-form-item",{attrs:{"wrapper-col":e.buttonItemLayout.wrapperCol}},[a("a-button",{attrs:{type:"primary"}},[e._v("\n Submit\n ")])],1)],1)],1)};Ye._withStripped=!0;var Re={data:function(){return{formLayout:"horizontal"}},computed:{formItemLayout:function(){return"horizontal"===this.formLayout?{labelCol:{span:4},wrapperCol:{span:14}}:{}},buttonItemLayout:function(){return"horizontal"===this.formLayout?{wrapperCol:{span:14,offset:4}}:{}}},methods:{handleFormLayoutChange:function(e){this.formLayout=e.target.value}}},ze=a(1388),Me=a.n(ze),Ae=a(1389),Oe=a.n(Ae),Ue=Object(o.a)(Re,Ye,[],!1,null,null,null);"function"==typeof Me.a&&Me()(Ue),"function"==typeof Oe.a&&Oe()(Ue),Ue.options.__file="components/form/demo/layout.vue";var He=Ue.exports,We='<cn>\n#### 表单布局\n表单有三种布局。\n</cn>\n\n<us>\n#### Form Layout\nThere are three layout for form: `horizontal`, `vertical`, `inline`.\n</us>\n\n<template>\n <div>\n <a-form :layout="formLayout">\n <a-form-item\n label="Form Layout"\n :label-col="formItemLayout.labelCol"\n :wrapper-col="formItemLayout.wrapperCol"\n >\n <a-radio-group default-value="horizontal" @change="handleFormLayoutChange">\n <a-radio-button value="horizontal">\n Horizontal\n </a-radio-button>\n <a-radio-button value="vertical">\n Vertical\n </a-radio-button>\n <a-radio-button value="inline">\n Inline\n </a-radio-button>\n </a-radio-group>\n </a-form-item>\n <a-form-item\n label="Field A"\n :label-col="formItemLayout.labelCol"\n :wrapper-col="formItemLayout.wrapperCol"\n >\n <a-input placeholder="input placeholder" />\n </a-form-item>\n <a-form-item\n label="Field B"\n :label-col="formItemLayout.labelCol"\n :wrapper-col="formItemLayout.wrapperCol"\n >\n <a-input placeholder="input placeholder" />\n </a-form-item>\n <a-form-item :wrapper-col="buttonItemLayout.wrapperCol">\n <a-button type="primary">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n </div>\n</template>\n\n<script>\nexport default {\n data() {\n return {\n formLayout: \'horizontal\',\n };\n },\n computed: {\n formItemLayout() {\n const { formLayout } = this;\n return formLayout === \'horizontal\'\n ? {\n labelCol: { span: 4 },\n wrapperCol: { span: 14 },\n }\n : {};\n },\n buttonItemLayout() {\n const { formLayout } = this;\n return formLayout === \'horizontal\'\n ? {\n wrapperCol: { span: 14, offset: 4 },\n }\n : {};\n },\n },\n methods: {\n handleFormLayoutChange(e) {\n this.formLayout = e.target.value;\n },\n },\n};\n<\/script>\n',Be=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{staticClass:"login-form",attrs:{id:"components-form-demo-normal-login",form:e.form},on:{submit:e.handleSubmit}},[a("a-form-item",[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["userName",{rules:[{required:!0,message:"Please input your username!"}]}],expression:"[\n 'userName',\n { rules: [{ required: true, message: 'Please input your username!' }] },\n ]"}],attrs:{placeholder:"Username"}},[a("a-icon",{staticStyle:{color:"rgba(0,0,0,.25)"},attrs:{slot:"prefix",type:"user"},slot:"prefix"})],1)],1),e._v(" "),a("a-form-item",[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["password",{rules:[{required:!0,message:"Please input your Password!"}]}],expression:"[\n 'password',\n { rules: [{ required: true, message: 'Please input your Password!' }] },\n ]"}],attrs:{type:"password",placeholder:"Password"}},[a("a-icon",{staticStyle:{color:"rgba(0,0,0,.25)"},attrs:{slot:"prefix",type:"lock"},slot:"prefix"})],1)],1),e._v(" "),a("a-form-item",[a("a-checkbox",{directives:[{name:"decorator",rawName:"v-decorator",value:["remember",{valuePropName:"checked",initialValue:!0}],expression:"[\n 'remember',\n {\n valuePropName: 'checked',\n initialValue: true,\n },\n ]"}]},[e._v("\n Remember me\n ")]),e._v(" "),a("a",{staticClass:"login-form-forgot",attrs:{href:""}},[e._v("\n Forgot password\n ")]),e._v(" "),a("a-button",{staticClass:"login-form-button",attrs:{type:"primary","html-type":"submit"}},[e._v("\n Log in\n ")]),e._v("\n Or\n "),a("a",{attrs:{href:""}},[e._v("\n register now!\n ")])],1)],1)};Be._withStripped=!0;var Ge={beforeCreate:function(){this.form=this.$form.createForm(this,{name:"normal_login"})},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))}}},Je=(a(1390),a(1391)),Ze=a.n(Je),Ke=a(1392),Qe=a.n(Ke),Xe=Object(o.a)(Ge,Be,[],!1,null,null,null);"function"==typeof Ze.a&&Ze()(Xe),"function"==typeof Qe.a&&Qe()(Xe),Xe.options.__file="components/form/demo/normal-login.vue";var et=Xe.exports,tt='<cn>\n#### 登录框\n普通的登录框,可以容纳更多的元素。\n</cn>\n\n<us>\n#### Login Form\nNormal login form which can contain more elements.\n</us>\n\n<template>\n <a-form\n id="components-form-demo-normal-login"\n :form="form"\n class="login-form"\n @submit="handleSubmit"\n >\n <a-form-item>\n <a-input\n v-decorator="[\n \'userName\',\n { rules: [{ required: true, message: \'Please input your username!\' }] },\n ]"\n placeholder="Username"\n >\n <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />\n </a-input>\n </a-form-item>\n <a-form-item>\n <a-input\n v-decorator="[\n \'password\',\n { rules: [{ required: true, message: \'Please input your Password!\' }] },\n ]"\n type="password"\n placeholder="Password"\n >\n <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" />\n </a-input>\n </a-form-item>\n <a-form-item>\n <a-checkbox\n v-decorator="[\n \'remember\',\n {\n valuePropName: \'checked\',\n initialValue: true,\n },\n ]"\n >\n Remember me\n </a-checkbox>\n <a class="login-form-forgot" href="">\n Forgot password\n </a>\n <a-button type="primary" html-type="submit" class="login-form-button">\n Log in\n </a-button>\n Or\n <a href="">\n register now!\n </a>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nexport default {\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: \'normal_login\' });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n },\n};\n<\/script>\n<style>\n#components-form-demo-normal-login .login-form {\n max-width: 300px;\n}\n#components-form-demo-normal-login .login-form-forgot {\n float: right;\n}\n#components-form-demo-normal-login .login-form-button {\n width: 100%;\n}\n</style>\n',at=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{form:e.form},on:{submit:e.handleSubmit}},[a("a-form-item",e._b({attrs:{label:"E-mail"}},"a-form-item",e.formItemLayout,!1),[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["email",{rules:[{type:"email",message:"The input is not valid E-mail!"},{required:!0,message:"Please input your E-mail!"}]}],expression:"[\n 'email',\n {\n rules: [\n {\n type: 'email',\n message: 'The input is not valid E-mail!',\n },\n {\n required: true,\n message: 'Please input your E-mail!',\n },\n ],\n },\n ]"}]})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Password"}},"a-form-item",e.formItemLayout,!1),[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["password",{rules:[{required:!0,message:"Please input your password!"},{validator:e.validateToNextPassword}]}],expression:"[\n 'password',\n {\n rules: [\n {\n required: true,\n message: 'Please input your password!',\n },\n {\n validator: validateToNextPassword,\n },\n ],\n },\n ]"}],attrs:{type:"password"}})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Confirm Password"}},"a-form-item",e.formItemLayout,!1),[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["confirm",{rules:[{required:!0,message:"Please confirm your password!"},{validator:e.compareToFirstPassword}]}],expression:"[\n 'confirm',\n {\n rules: [\n {\n required: true,\n message: 'Please confirm your password!',\n },\n {\n validator: compareToFirstPassword,\n },\n ],\n },\n ]"}],attrs:{type:"password"},on:{blur:e.handleConfirmBlur}})],1),e._v(" "),a("a-form-item",e._b({},"a-form-item",e.formItemLayout,!1),[a("span",{attrs:{slot:"label"},slot:"label"},[e._v("\n Nickname \n "),a("a-tooltip",{attrs:{title:"What do you want others to call you?"}},[a("a-icon",{attrs:{type:"question-circle-o"}})],1)],1),e._v(" "),a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["nickname",{rules:[{required:!0,message:"Please input your nickname!",whitespace:!0}]}],expression:"[\n 'nickname',\n {\n rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],\n },\n ]"}]})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Habitual Residence"}},"a-form-item",e.formItemLayout,!1),[a("a-cascader",{directives:[{name:"decorator",rawName:"v-decorator",value:["residence",{initialValue:["zhejiang","hangzhou","xihu"],rules:[{type:"array",required:!0,message:"Please select your habitual residence!"}]}],expression:"[\n 'residence',\n {\n initialValue: ['zhejiang', 'hangzhou', 'xihu'],\n rules: [\n { type: 'array', required: true, message: 'Please select your habitual residence!' },\n ],\n },\n ]"}],attrs:{options:e.residences}})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Phone Number"}},"a-form-item",e.formItemLayout,!1),[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["phone",{rules:[{required:!0,message:"Please input your phone number!"}]}],expression:"[\n 'phone',\n {\n rules: [{ required: true, message: 'Please input your phone number!' }],\n },\n ]"}],staticStyle:{width:"100%"}},[a("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["prefix",{initialValue:"86"}],expression:"['prefix', { initialValue: '86' }]"}],staticStyle:{width:"70px"},attrs:{slot:"addonBefore"},slot:"addonBefore"},[a("a-select-option",{attrs:{value:"86"}},[e._v("\n +86\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"87"}},[e._v("\n +87\n ")])],1)],1)],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Website"}},"a-form-item",e.formItemLayout,!1),[a("a-auto-complete",{directives:[{name:"decorator",rawName:"v-decorator",value:["website",{rules:[{required:!0,message:"Please input website!"}]}],expression:"['website', { rules: [{ required: true, message: 'Please input website!' }] }]"}],attrs:{placeholder:"website"},on:{change:e.handleWebsiteChange}},[a("template",{slot:"dataSource"},e._l(e.autoCompleteResult,(function(t){return a("a-select-option",{key:t},[e._v("\n "+e._s(t)+"\n ")])})),1),e._v(" "),a("a-input")],2)],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"Captcha",extra:"We must make sure that your are a human."}},"a-form-item",e.formItemLayout,!1),[a("a-row",{attrs:{gutter:8}},[a("a-col",{attrs:{span:12}},[a("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["captcha",{rules:[{required:!0,message:"Please input the captcha you got!"}]}],expression:"[\n 'captcha',\n { rules: [{ required: true, message: 'Please input the captcha you got!' }] },\n ]"}]})],1),e._v(" "),a("a-col",{attrs:{span:12}},[a("a-button",[e._v("Get captcha")])],1)],1)],1),e._v(" "),a("a-form-item",e._b({},"a-form-item",e.tailFormItemLayout,!1),[a("a-checkbox",{directives:[{name:"decorator",rawName:"v-decorator",value:["agreement",{valuePropName:"checked"}],expression:"['agreement', { valuePropName: 'checked' }]"}]},[e._v("\n I have read the\n "),a("a",{attrs:{href:""}},[e._v("\n agreement\n ")])])],1),e._v(" "),a("a-form-item",e._b({},"a-form-item",e.tailFormItemLayout,!1),[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Register\n ")])],1)],1)};at._withStripped=!0;var nt=[{value:"zhejiang",label:"Zhejiang",children:[{value:"hangzhou",label:"Hangzhou",children:[{value:"xihu",label:"West Lake"}]}]},{value:"jiangsu",label:"Jiangsu",children:[{value:"nanjing",label:"Nanjing",children:[{value:"zhonghuamen",label:"Zhong Hua Men"}]}]}],rt={data:function(){return{confirmDirty:!1,residences:nt,autoCompleteResult:[],formItemLayout:{labelCol:{xs:{span:24},sm:{span:8}},wrapperCol:{xs:{span:24},sm:{span:16}}},tailFormItemLayout:{wrapperCol:{xs:{span:24,offset:0},sm:{span:16,offset:8}}}}},beforeCreate:function(){this.form=this.$form.createForm(this,{name:"register"})},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFieldsAndScroll((function(e,t){e||console.log("Received values of form: ",t)}))},handleConfirmBlur:function(e){var t=e.target.value;this.confirmDirty=this.confirmDirty||!!t},compareToFirstPassword:function(e,t,a){var n=this.form;t&&t!==n.getFieldValue("password")?a("Two passwords that you enter is inconsistent!"):a()},validateToNextPassword:function(e,t,a){var n=this.form;t&&this.confirmDirty&&n.validateFields(["confirm"],{force:!0}),a()},handleWebsiteChange:function(e){var t=void 0;t=e?[".com",".org",".net"].map((function(t){return""+e+t})):[],this.autoCompleteResult=t}}},ot=a(1393),st=a.n(ot),it=a(1394),lt=a.n(it),vt=Object(o.a)(rt,at,[],!1,null,null,null);"function"==typeof st.a&&st()(vt),"function"==typeof lt.a&<()(vt),vt.options.__file="components/form/demo/register.vue";var dt=vt.exports,mt='<cn>\n#### 注册新用户\n用户填写必须的信息以注册新用户。\n</cn>\n\n<us>\n#### Registration\nFill in this form to create a new account for you.\n</us>\n\n<template>\n <a-form :form="form" @submit="handleSubmit">\n <a-form-item v-bind="formItemLayout" label="E-mail">\n <a-input\n v-decorator="[\n \'email\',\n {\n rules: [\n {\n type: \'email\',\n message: \'The input is not valid E-mail!\',\n },\n {\n required: true,\n message: \'Please input your E-mail!\',\n },\n ],\n },\n ]"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayout" label="Password">\n <a-input\n v-decorator="[\n \'password\',\n {\n rules: [\n {\n required: true,\n message: \'Please input your password!\',\n },\n {\n validator: validateToNextPassword,\n },\n ],\n },\n ]"\n type="password"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayout" label="Confirm Password">\n <a-input\n v-decorator="[\n \'confirm\',\n {\n rules: [\n {\n required: true,\n message: \'Please confirm your password!\',\n },\n {\n validator: compareToFirstPassword,\n },\n ],\n },\n ]"\n type="password"\n @blur="handleConfirmBlur"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayout">\n <span slot="label">\n Nickname \n <a-tooltip title="What do you want others to call you?">\n <a-icon type="question-circle-o" />\n </a-tooltip>\n </span>\n <a-input\n v-decorator="[\n \'nickname\',\n {\n rules: [{ required: true, message: \'Please input your nickname!\', whitespace: true }],\n },\n ]"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayout" label="Habitual Residence">\n <a-cascader\n v-decorator="[\n \'residence\',\n {\n initialValue: [\'zhejiang\', \'hangzhou\', \'xihu\'],\n rules: [\n { type: \'array\', required: true, message: \'Please select your habitual residence!\' },\n ],\n },\n ]"\n :options="residences"\n />\n </a-form-item>\n <a-form-item v-bind="formItemLayout" label="Phone Number">\n <a-input\n v-decorator="[\n \'phone\',\n {\n rules: [{ required: true, message: \'Please input your phone number!\' }],\n },\n ]"\n style="width: 100%"\n >\n <a-select\n slot="addonBefore"\n v-decorator="[\'prefix\', { initialValue: \'86\' }]"\n style="width: 70px"\n >\n <a-select-option value="86">\n +86\n </a-select-option>\n <a-select-option value="87">\n +87\n </a-select-option>\n </a-select>\n </a-input>\n </a-form-item>\n <a-form-item v-bind="formItemLayout" label="Website">\n <a-auto-complete\n v-decorator="[\'website\', { rules: [{ required: true, message: \'Please input website!\' }] }]"\n placeholder="website"\n @change="handleWebsiteChange"\n >\n <template slot="dataSource">\n <a-select-option v-for="website in autoCompleteResult" :key="website">\n {{ website }}\n </a-select-option>\n </template>\n <a-input />\n </a-auto-complete>\n </a-form-item>\n <a-form-item\n v-bind="formItemLayout"\n label="Captcha"\n extra="We must make sure that your are a human."\n >\n <a-row :gutter="8">\n <a-col :span="12">\n <a-input\n v-decorator="[\n \'captcha\',\n { rules: [{ required: true, message: \'Please input the captcha you got!\' }] },\n ]"\n />\n </a-col>\n <a-col :span="12">\n <a-button>Get captcha</a-button>\n </a-col>\n </a-row>\n </a-form-item>\n <a-form-item v-bind="tailFormItemLayout">\n <a-checkbox v-decorator="[\'agreement\', { valuePropName: \'checked\' }]">\n I have read the\n <a href="">\n agreement\n </a>\n </a-checkbox>\n </a-form-item>\n <a-form-item v-bind="tailFormItemLayout">\n <a-button type="primary" html-type="submit">\n Register\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nconst residences = [\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [\n {\n value: \'hangzhou\',\n label: \'Hangzhou\',\n children: [\n {\n value: \'xihu\',\n label: \'West Lake\',\n },\n ],\n },\n ],\n },\n {\n value: \'jiangsu\',\n label: \'Jiangsu\',\n children: [\n {\n value: \'nanjing\',\n label: \'Nanjing\',\n children: [\n {\n value: \'zhonghuamen\',\n label: \'Zhong Hua Men\',\n },\n ],\n },\n ],\n },\n];\n\nexport default {\n data() {\n return {\n confirmDirty: false,\n residences,\n autoCompleteResult: [],\n formItemLayout: {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 8 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 16 },\n },\n },\n tailFormItemLayout: {\n wrapperCol: {\n xs: {\n span: 24,\n offset: 0,\n },\n sm: {\n span: 16,\n offset: 8,\n },\n },\n },\n };\n },\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: \'register\' });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFieldsAndScroll((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n handleConfirmBlur(e) {\n const value = e.target.value;\n this.confirmDirty = this.confirmDirty || !!value;\n },\n compareToFirstPassword(rule, value, callback) {\n const form = this.form;\n if (value && value !== form.getFieldValue(\'password\')) {\n callback(\'Two passwords that you enter is inconsistent!\');\n } else {\n callback();\n }\n },\n validateToNextPassword(rule, value, callback) {\n const form = this.form;\n if (value && this.confirmDirty) {\n form.validateFields([\'confirm\'], { force: true });\n }\n callback();\n },\n handleWebsiteChange(value) {\n let autoCompleteResult;\n if (!value) {\n autoCompleteResult = [];\n } else {\n autoCompleteResult = [\'.com\', \'.org\', \'.net\'].map(domain => `${value}${domain}`);\n }\n this.autoCompleteResult = autoCompleteResult;\n },\n },\n};\n<\/script>\n',ct=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",{attrs:{form:e.form},on:{submit:e.handleSubmit}},[a("a-form-item",e._b({attrs:{label:"DatePicker"}},"a-form-item",e.formItemLayout,!1),[a("a-date-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["date-picker",e.config],expression:"['date-picker', config]"}]})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"DatePicker[showTime]"}},"a-form-item",e.formItemLayout,!1),[a("a-date-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["date-time-picker",e.config],expression:"['date-time-picker', config]"}],attrs:{"show-time":"",format:"YYYY-MM-DD HH:mm:ss"}})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"MonthPicker"}},"a-form-item",e.formItemLayout,!1),[a("a-monthPicker",{directives:[{name:"decorator",rawName:"v-decorator",value:["month-picker",e.config],expression:"['month-picker', config]"}]})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"RangePicker"}},"a-form-item",e.formItemLayout,!1),[a("a-range-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["range-picker",e.rangeConfig],expression:"['range-picker', rangeConfig]"}]})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"RangePicker[showTime]"}},"a-form-item",e.formItemLayout,!1),[a("a-range-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["range-time-picker",e.rangeConfig],expression:"['range-time-picker', rangeConfig]"}],attrs:{"show-time":"",format:"YYYY-MM-DD HH:mm:ss"}})],1),e._v(" "),a("a-form-item",e._b({attrs:{label:"TimePicker"}},"a-form-item",e.formItemLayout,!1),[a("a-time-picker",{directives:[{name:"decorator",rawName:"v-decorator",value:["time-picker",e.config],expression:"['time-picker', config]"}]})],1),e._v(" "),a("a-form-item",{attrs:{"wrapper-col":{xs:{span:24,offset:0},sm:{span:16,offset:8}}}},[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Submit\n ")])],1)],1)};ct._withStripped=!0;var ut={data:function(){return{formItemLayout:{labelCol:{xs:{span:24},sm:{span:8}},wrapperCol:{xs:{span:24},sm:{span:16}}},config:{rules:[{type:"object",required:!0,message:"Please select time!"}]},rangeConfig:{rules:[{type:"array",required:!0,message:"Please select time!"}]}}},beforeCreate:function(){this.form=this.$form.createForm(this,{name:"time_related_controls"})},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){if(!e){var a=t["range-picker"],n=t["range-time-picker"],r=k()({},t,{"date-picker":t["date-picker"].format("YYYY-MM-DD"),"date-time-picker":t["date-time-picker"].format("YYYY-MM-DD HH:mm:ss"),"month-picker":t["month-picker"].format("YYYY-MM"),"range-picker":[a[0].format("YYYY-MM-DD"),a[1].format("YYYY-MM-DD")],"range-time-picker":[n[0].format("YYYY-MM-DD HH:mm:ss"),n[1].format("YYYY-MM-DD HH:mm:ss")],"time-picker":t["time-picker"].format("HH:mm:ss")});console.log("Received values of form: ",r)}}))}}},pt=a(1395),_t=a.n(pt),ft=a(1396),ht=a.n(ft),gt=Object(o.a)(ut,ct,[],!1,null,null,null);"function"==typeof _t.a&&_t()(gt),"function"==typeof ht.a&&ht()(gt),gt.options.__file="components/form/demo/time-related-controls.vue";var bt=gt.exports,yt="<cn>\n#### 时间类控件\n时间类组件的 `value` 类型为 `moment` 对象,所以在提交服务器前需要预处理。\n</cn>\n\n<us>\n#### Time-related Controls\nThe `value` of time-related components is a `moment` object, which we need to pre-process it before we submit to server.\n</us>\n\n<template>\n <a-form :form=\"form\" @submit=\"handleSubmit\">\n <a-form-item v-bind=\"formItemLayout\" label=\"DatePicker\">\n <a-date-picker v-decorator=\"['date-picker', config]\" />\n </a-form-item>\n <a-form-item v-bind=\"formItemLayout\" label=\"DatePicker[showTime]\">\n <a-date-picker\n v-decorator=\"['date-time-picker', config]\"\n show-time\n format=\"YYYY-MM-DD HH:mm:ss\"\n />\n </a-form-item>\n <a-form-item v-bind=\"formItemLayout\" label=\"MonthPicker\">\n <a-monthPicker v-decorator=\"['month-picker', config]\" />\n </a-form-item>\n <a-form-item v-bind=\"formItemLayout\" label=\"RangePicker\">\n <a-range-picker v-decorator=\"['range-picker', rangeConfig]\" />\n </a-form-item>\n <a-form-item v-bind=\"formItemLayout\" label=\"RangePicker[showTime]\">\n <a-range-picker\n v-decorator=\"['range-time-picker', rangeConfig]\"\n show-time\n format=\"YYYY-MM-DD HH:mm:ss\"\n />\n </a-form-item>\n <a-form-item v-bind=\"formItemLayout\" label=\"TimePicker\">\n <a-time-picker v-decorator=\"['time-picker', config]\" />\n </a-form-item>\n <a-form-item\n :wrapper-col=\"{\n xs: { span: 24, offset: 0 },\n sm: { span: 16, offset: 8 },\n }\"\n >\n <a-button type=\"primary\" html-type=\"submit\">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n<script>\nexport default {\n data() {\n return {\n formItemLayout: {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 8 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 16 },\n },\n },\n config: {\n rules: [{ type: 'object', required: true, message: 'Please select time!' }],\n },\n rangeConfig: {\n rules: [{ type: 'array', required: true, message: 'Please select time!' }],\n },\n };\n },\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: 'time_related_controls' });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, fieldsValue) => {\n if (err) {\n return;\n }\n\n // Should format date value before submit.\n const rangeValue = fieldsValue['range-picker'];\n const rangeTimeValue = fieldsValue['range-time-picker'];\n const values = {\n ...fieldsValue,\n 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),\n 'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),\n 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),\n 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],\n 'range-time-picker': [\n rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),\n rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),\n ],\n 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),\n };\n console.log('Received values of form: ', values);\n });\n },\n },\n};\n<\/script>\n",wt=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",e._b({attrs:{id:"components-form-demo-validate-other",form:e.form},on:{submit:e.handleSubmit}},"a-form",e.formItemLayout,!1),[a("a-form-item",{attrs:{label:"Plain Text"}},[a("span",{staticClass:"ant-form-text"},[e._v("\n China\n ")])]),e._v(" "),a("a-form-item",{attrs:{label:"Select","has-feedback":""}},[a("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["select",{rules:[{required:!0,message:"Please select your country!"}]}],expression:"[\n 'select',\n { rules: [{ required: true, message: 'Please select your country!' }] },\n ]"}],attrs:{placeholder:"Please select a country"}},[a("a-select-option",{attrs:{value:"china"}},[e._v("\n China\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"usa"}},[e._v("\n U.S.A\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Select[multiple]"}},[a("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["select-multiple",{rules:[{required:!0,message:"Please select your favourite colors!",type:"array"}]}],expression:"[\n 'select-multiple',\n {\n rules: [\n { required: true, message: 'Please select your favourite colors!', type: 'array' },\n ],\n },\n ]"}],attrs:{mode:"multiple",placeholder:"Please select favourite colors"}},[a("a-select-option",{attrs:{value:"red"}},[e._v("\n Red\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"green"}},[e._v("\n Green\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"blue"}},[e._v("\n Blue\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"InputNumber"}},[a("a-input-number",{directives:[{name:"decorator",rawName:"v-decorator",value:["input-number",{initialValue:3}],expression:"['input-number', { initialValue: 3 }]"}],attrs:{min:1,max:10}}),e._v(" "),a("span",{staticClass:"ant-form-text"},[e._v("\n machines\n ")])],1),e._v(" "),a("a-form-item",{attrs:{label:"Switch"}},[a("a-switch",{directives:[{name:"decorator",rawName:"v-decorator",value:["switch",{valuePropName:"checked"}],expression:"['switch', { valuePropName: 'checked' }]"}]})],1),e._v(" "),a("a-form-item",{attrs:{label:"Slider"}},[a("a-slider",{directives:[{name:"decorator",rawName:"v-decorator",value:["slider"],expression:"['slider']"}],attrs:{marks:{0:"A",20:"B",40:"C",60:"D",80:"E",100:"F"}}})],1),e._v(" "),a("a-form-item",{attrs:{label:"Radio.Group"}},[a("a-radio-group",{directives:[{name:"decorator",rawName:"v-decorator",value:["radio-group"],expression:"['radio-group']"}]},[a("a-radio",{attrs:{value:"a"}},[e._v("\n item 1\n ")]),e._v(" "),a("a-radio",{attrs:{value:"b"}},[e._v("\n item 2\n ")]),e._v(" "),a("a-radio",{attrs:{value:"c"}},[e._v("\n item 3\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Radio.Button"}},[a("a-radio-group",{directives:[{name:"decorator",rawName:"v-decorator",value:["radio-button"],expression:"['radio-button']"}]},[a("a-radio-button",{attrs:{value:"a"}},[e._v("\n item 1\n ")]),e._v(" "),a("a-radio-button",{attrs:{value:"b"}},[e._v("\n item 2\n ")]),e._v(" "),a("a-radio-button",{attrs:{value:"c"}},[e._v("\n item 3\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Checkbox.Group"}},[a("a-checkbox-group",{directives:[{name:"decorator",rawName:"v-decorator",value:["checkbox-group",{initialValue:["A","B"]}],expression:"['checkbox-group', { initialValue: ['A', 'B'] }]"}],staticStyle:{width:"100%"}},[a("a-row",[a("a-col",{attrs:{span:8}},[a("a-checkbox",{attrs:{value:"A"}},[e._v("\n A\n ")])],1),e._v(" "),a("a-col",{attrs:{span:8}},[a("a-checkbox",{attrs:{disabled:"",value:"B"}},[e._v("\n B\n ")])],1),e._v(" "),a("a-col",{attrs:{span:8}},[a("a-checkbox",{attrs:{value:"C"}},[e._v("\n C\n ")])],1),e._v(" "),a("a-col",{attrs:{span:8}},[a("a-checkbox",{attrs:{value:"D"}},[e._v("\n D\n ")])],1),e._v(" "),a("a-col",{attrs:{span:8}},[a("a-checkbox",{attrs:{value:"E"}},[e._v("\n E\n ")])],1)],1)],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Rate"}},[a("a-rate",{directives:[{name:"decorator",rawName:"v-decorator",value:["rate",{initialValue:3.5}],expression:"['rate', { initialValue: 3.5 }]"}],attrs:{"allow-half":""}})],1),e._v(" "),a("a-form-item",{attrs:{label:"Upload",extra:"longgggggggggggggggggggggggggggggggggg"}},[a("a-upload",{directives:[{name:"decorator",rawName:"v-decorator",value:["upload",{valuePropName:"fileList",getValueFromEvent:e.normFile}],expression:"[\n 'upload',\n {\n valuePropName: 'fileList',\n getValueFromEvent: normFile,\n },\n ]"}],attrs:{name:"logo",action:"/upload.do","list-type":"picture"}},[a("a-button",[a("a-icon",{attrs:{type:"upload"}}),e._v(" Click to upload ")],1)],1)],1),e._v(" "),a("a-form-item",{attrs:{label:"Dragger"}},[a("div",{staticClass:"dropbox"},[a("a-upload-dragger",{directives:[{name:"decorator",rawName:"v-decorator",value:["dragger",{valuePropName:"fileList",getValueFromEvent:e.normFile}],expression:"[\n 'dragger',\n {\n valuePropName: 'fileList',\n getValueFromEvent: normFile,\n },\n ]"}],attrs:{name:"files",action:"/upload.do"}},[a("p",{staticClass:"ant-upload-drag-icon"},[a("a-icon",{attrs:{type:"inbox"}})],1),e._v(" "),a("p",{staticClass:"ant-upload-text"},[e._v("\n Click or drag file to this area to upload\n ")]),e._v(" "),a("p",{staticClass:"ant-upload-hint"},[e._v("\n Support for a single or bulk upload.\n ")])])],1)]),e._v(" "),a("a-form-item",{attrs:{"wrapper-col":{span:12,offset:6}}},[a("a-button",{attrs:{type:"primary","html-type":"submit"}},[e._v("\n Submit\n ")])],1)],1)};wt._withStripped=!0;var Ft={data:function(){return{formItemLayout:{labelCol:{span:6},wrapperCol:{span:14}}}},beforeCreate:function(){this.form=this.$form.createForm(this,{name:"validate_other"})},methods:{handleSubmit:function(e){e.preventDefault(),this.form.validateFields((function(e,t){e||console.log("Received values of form: ",t)}))},normFile:function(e){return console.log("Upload event:",e),Array.isArray(e)?e:e&&e.fileList}}},Ct=(a(1397),a(1398)),kt=a.n(Ct),xt=a(1399),Pt=a.n(xt),jt=Object(o.a)(Ft,wt,[],!1,null,null,null);"function"==typeof kt.a&&kt()(jt),"function"==typeof Pt.a&&Pt()(jt),jt.options.__file="components/form/demo/validate-other.vue";var St=jt.exports,Nt='<cn>\n#### 校验其他组件\n以上演示没有出现的表单控件对应的校验演示。\n</cn>\n\n<us>\n#### Other Form Controls\nDemonstration of validation configuration for form controls which are not shown in the demos above.\n</us>\n\n<template>\n <a-form\n id="components-form-demo-validate-other"\n :form="form"\n v-bind="formItemLayout"\n @submit="handleSubmit"\n >\n <a-form-item label="Plain Text">\n <span class="ant-form-text">\n China\n </span>\n </a-form-item>\n <a-form-item label="Select" has-feedback>\n <a-select\n v-decorator="[\n \'select\',\n { rules: [{ required: true, message: \'Please select your country!\' }] },\n ]"\n placeholder="Please select a country"\n >\n <a-select-option value="china">\n China\n </a-select-option>\n <a-select-option value="usa">\n U.S.A\n </a-select-option>\n </a-select>\n </a-form-item>\n\n <a-form-item label="Select[multiple]">\n <a-select\n v-decorator="[\n \'select-multiple\',\n {\n rules: [\n { required: true, message: \'Please select your favourite colors!\', type: \'array\' },\n ],\n },\n ]"\n mode="multiple"\n placeholder="Please select favourite colors"\n >\n <a-select-option value="red">\n Red\n </a-select-option>\n <a-select-option value="green">\n Green\n </a-select-option>\n <a-select-option value="blue">\n Blue\n </a-select-option>\n </a-select>\n </a-form-item>\n\n <a-form-item label="InputNumber">\n <a-input-number v-decorator="[\'input-number\', { initialValue: 3 }]" :min="1" :max="10" />\n <span class="ant-form-text">\n machines\n </span>\n </a-form-item>\n\n <a-form-item label="Switch">\n <a-switch v-decorator="[\'switch\', { valuePropName: \'checked\' }]" />\n </a-form-item>\n\n <a-form-item label="Slider">\n <a-slider\n v-decorator="[\'slider\']"\n :marks="{ 0: \'A\', 20: \'B\', 40: \'C\', 60: \'D\', 80: \'E\', 100: \'F\' }"\n />\n </a-form-item>\n\n <a-form-item label="Radio.Group">\n <a-radio-group v-decorator="[\'radio-group\']">\n <a-radio value="a">\n item 1\n </a-radio>\n <a-radio value="b">\n item 2\n </a-radio>\n <a-radio value="c">\n item 3\n </a-radio>\n </a-radio-group>\n </a-form-item>\n\n <a-form-item label="Radio.Button">\n <a-radio-group v-decorator="[\'radio-button\']">\n <a-radio-button value="a">\n item 1\n </a-radio-button>\n <a-radio-button value="b">\n item 2\n </a-radio-button>\n <a-radio-button value="c">\n item 3\n </a-radio-button>\n </a-radio-group>\n </a-form-item>\n\n <a-form-item label="Checkbox.Group">\n <a-checkbox-group\n v-decorator="[\'checkbox-group\', { initialValue: [\'A\', \'B\'] }]"\n style="width: 100%;"\n >\n <a-row>\n <a-col :span="8">\n <a-checkbox value="A">\n A\n </a-checkbox>\n </a-col>\n <a-col :span="8">\n <a-checkbox disabled value="B">\n B\n </a-checkbox>\n </a-col>\n <a-col :span="8">\n <a-checkbox value="C">\n C\n </a-checkbox>\n </a-col>\n <a-col :span="8">\n <a-checkbox value="D">\n D\n </a-checkbox>\n </a-col>\n <a-col :span="8">\n <a-checkbox value="E">\n E\n </a-checkbox>\n </a-col>\n </a-row>\n </a-checkbox-group>\n </a-form-item>\n\n <a-form-item label="Rate">\n <a-rate v-decorator="[\'rate\', { initialValue: 3.5 }]" allow-half />\n </a-form-item>\n\n <a-form-item label="Upload" extra="longgggggggggggggggggggggggggggggggggg">\n <a-upload\n v-decorator="[\n \'upload\',\n {\n valuePropName: \'fileList\',\n getValueFromEvent: normFile,\n },\n ]"\n name="logo"\n action="/upload.do"\n list-type="picture"\n >\n <a-button> <a-icon type="upload" /> Click to upload </a-button>\n </a-upload>\n </a-form-item>\n\n <a-form-item label="Dragger">\n <div class="dropbox">\n <a-upload-dragger\n v-decorator="[\n \'dragger\',\n {\n valuePropName: \'fileList\',\n getValueFromEvent: normFile,\n },\n ]"\n name="files"\n action="/upload.do"\n >\n <p class="ant-upload-drag-icon">\n <a-icon type="inbox" />\n </p>\n <p class="ant-upload-text">\n Click or drag file to this area to upload\n </p>\n <p class="ant-upload-hint">\n Support for a single or bulk upload.\n </p>\n </a-upload-dragger>\n </div>\n </a-form-item>\n\n <a-form-item :wrapper-col="{ span: 12, offset: 6 }">\n <a-button type="primary" html-type="submit">\n Submit\n </a-button>\n </a-form-item>\n </a-form>\n</template>\n\n<script>\nexport default {\n data: () => ({\n formItemLayout: {\n labelCol: { span: 6 },\n wrapperCol: { span: 14 },\n },\n }),\n beforeCreate() {\n this.form = this.$form.createForm(this, { name: \'validate_other\' });\n },\n methods: {\n handleSubmit(e) {\n e.preventDefault();\n this.form.validateFields((err, values) => {\n if (!err) {\n console.log(\'Received values of form: \', values);\n }\n });\n },\n normFile(e) {\n console.log(\'Upload event:\', e);\n if (Array.isArray(e)) {\n return e;\n }\n return e && e.fileList;\n },\n },\n};\n<\/script>\n<style>\n#components-form-demo-validate-other .dropbox {\n height: 180px;\n line-height: 1.5;\n}\n</style>\n',Lt=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("a-form",[a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Fail","validate-status":"error",help:"Should be combination of numbers & alphabets"}},[a("a-input",{attrs:{id:"error",placeholder:"unavailable choice"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Warning","validate-status":"warning"}},[a("a-input",{attrs:{id:"warning",placeholder:"Warning"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Validating","has-feedback":"","validate-status":"validating",help:"The information is being validated..."}},[a("a-input",{attrs:{id:"validating",placeholder:"I'm the content is being validated"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Success","has-feedback":"","validate-status":"success"}},[a("a-input",{attrs:{id:"success",placeholder:"I'm the content"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Warning","has-feedback":"","validate-status":"warning"}},[a("a-input",{attrs:{id:"warning2",placeholder:"Warning"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Fail","has-feedback":"","validate-status":"error",help:"Should be combination of numbers & alphabets"}},[a("a-input",{attrs:{id:"error2",placeholder:"unavailable choice"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Success","has-feedback":"","validate-status":"success"}},[a("a-date-picker",{staticStyle:{width:"100%"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Warning","has-feedback":"","validate-status":"warning"}},[a("a-time-picker",{staticStyle:{width:"100%"}})],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Error","has-feedback":"","validate-status":"error"}},[a("a-select",{attrs:{"default-value":"1"}},[a("a-select-option",{attrs:{value:"1"}},[e._v("\n Option 1\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"2"}},[e._v("\n Option 2\n ")]),e._v(" "),a("a-select-option",{attrs:{value:"3"}},[e._v("\n Option 3\n ")])],1)],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Validating","has-feedback":"","validate-status":"validating",help:"The information is being validated..."}},[a("a-cascader",{attrs:{"default-value":["1"],options:[]}})],1),e._v(" "),a("a-form-item",{staticStyle:{"margin-bottom":"0"},attrs:{label:"inline","label-col":e.labelCol,"wrapper-col":e.wrapperCol}},[a("a-form-item",{style:{display:"inline-block",width:"calc(50% - 12px)"},attrs:{"validate-status":"error",help:"Please select the correct date"}},[a("a-date-picker",{staticStyle:{width:"100%"}})],1),e._v(" "),a("span",{style:{display:"inline-block",width:"24px",textAlign:"center"}},[e._v("\n -\n ")]),e._v(" "),a("a-form-item",{style:{display:"inline-block",width:"calc(50% - 12px)"}},[a("a-date-picker",{staticStyle:{width:"100%"}})],1)],1),e._v(" "),a("a-form-item",{attrs:{"label-col":e.labelCol,"wrapper-col":e.wrapperCol,label:"Success","has-feedback":"","validate-status":"success"}},[a("a-input-number",{staticStyle:{width:"100%"}})],1)],1)};Lt._withStripped=!0;var It={data:function(){return{labelCol:{xs:{span:24},sm:{span:5}},wrapperCol:{xs:{span:24},sm:{span:12}}}}},Dt=a(1400),Vt=a.n(Dt),Tt=a(1401),$t=a.n(Tt),qt=Object(o.a)(It,Lt,[],!1,null,null,null);"function"==typeof Vt.a&&Vt()(qt),"function"==typeof $t.a&&$t()(qt),qt.options.__file="components/form/demo/validate-static.vue";var Et=qt.exports,Yt='<cn>\n#### 自定义校验\n我们提供了 `validateStatus` `help` `hasFeedback` 等属性,你可以不需要使用 `Form.create` 和 `getFieldDecorator`,自己定义校验的时机和内容。\n1. `validateStatus`: 校验状态,可选 \'success\', \'warning\', \'error\', \'validating\'。\n2. `hasFeedback`:用于给输入框添加反馈图标。\n3. `help`:设置校验文案。\n</cn>\n\n<us>\n#### Customized Validation\nWe provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using `Form.create` and `getFieldDecorator`.\n1. `validateStatus`: validate status of form components which could be \'success\', \'warning\', \'error\', \'validating\'.\n2. `hasFeedback`: display feed icon of input control\n3. `help`: display validate message.\n</us>\n\n<template>\n <a-form>\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Fail"\n validate-status="error"\n help="Should be combination of numbers & alphabets"\n >\n <a-input id="error" placeholder="unavailable choice" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Warning"\n validate-status="warning"\n >\n <a-input id="warning" placeholder="Warning" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Validating"\n has-feedback\n validate-status="validating"\n help="The information is being validated..."\n >\n <a-input id="validating" placeholder="I\'m the content is being validated" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Success"\n has-feedback\n validate-status="success"\n >\n <a-input id="success" placeholder="I\'m the content" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Warning"\n has-feedback\n validate-status="warning"\n >\n <a-input id="warning2" placeholder="Warning" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Fail"\n has-feedback\n validate-status="error"\n help="Should be combination of numbers & alphabets"\n >\n <a-input id="error2" placeholder="unavailable choice" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Success"\n has-feedback\n validate-status="success"\n >\n <a-date-picker style="width: 100%" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Warning"\n has-feedback\n validate-status="warning"\n >\n <a-time-picker style="width: 100%" />\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Error"\n has-feedback\n validate-status="error"\n >\n <a-select default-value="1">\n <a-select-option value="1">\n Option 1\n </a-select-option>\n <a-select-option value="2">\n Option 2\n </a-select-option>\n <a-select-option value="3">\n Option 3\n </a-select-option>\n </a-select>\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Validating"\n has-feedback\n validate-status="validating"\n help="The information is being validated..."\n >\n <a-cascader :default-value="[\'1\']" :options="[]" />\n </a-form-item>\n\n <a-form-item\n label="inline"\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n style="margin-bottom:0;"\n >\n <a-form-item\n validate-status="error"\n help="Please select the correct date"\n :style="{ display: \'inline-block\', width: \'calc(50% - 12px)\' }"\n >\n <a-date-picker style="width: 100%" />\n </a-form-item>\n <span :style="{ display: \'inline-block\', width: \'24px\', textAlign: \'center\' }">\n -\n </span>\n <a-form-item :style="{ display: \'inline-block\', width: \'calc(50% - 12px)\' }">\n <a-date-picker style="width: 100%" />\n </a-form-item>\n </a-form-item>\n\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Success"\n has-feedback\n validate-status="success"\n >\n <a-input-number style="width: 100%" />\n </a-form-item>\n </a-form>\n</template>\n<script>\nexport default {\n data() {\n return {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 5 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 12 },\n },\n };\n },\n};\n<\/script>\n',Rt=function(){var e=this.$createElement,t=this._self._c||e;return t("a-form",[t("a-form-item",{attrs:{"label-col":this.labelCol,"wrapper-col":this.wrapperCol,label:"Prime between 8 & 12","validate-status":this.number.validateStatus,help:this.number.errorMsg||this.tips}},[t("a-input-number",{attrs:{min:8,max:12,value:this.number.value},on:{change:this.handleNumberChange}})],1)],1)};Rt._withStripped=!0;var zt={data:function(){return{labelCol:{span:7},wrapperCol:{span:12},number:{value:11},tips:"A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself."}},methods:{handleNumberChange:function(e){this.number=k()({},11===e?{validateStatus:"success",errorMsg:null}:{validateStatus:"error",errorMsg:"The prime between 8 and 12 is 11!"},{value:e})}}},Mt=a(1402),At=a.n(Mt),Ot=a(1403),Ut=a.n(Ot),Ht=Object(o.a)(zt,Rt,[],!1,null,null,null);"function"==typeof At.a&&At()(Ht),"function"==typeof Ut.a&&Ut()(Ht),Ht.options.__file="components/form/demo/without-form-create.vue";var Wt=Ht.exports,Bt='<cn>\n#### 自行处理表单数据\n使用 `Form.create` 处理后的表单具有自动收集数据并校验的功能,但如果您不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用 `Form.create` 并自行处理数据。\n</cn>\n\n<us>\n#### Handle Form Data Manually\n`Form.create` will collect and validate form data automatically. But if you don\'t need this feature or the default behaviour cannot satisfy your business, you can drop `Form.create` and handle form data manually.\n</us>\n\n<template>\n <a-form>\n <a-form-item\n :label-col="labelCol"\n :wrapper-col="wrapperCol"\n label="Prime between 8 & 12"\n :validate-status="number.validateStatus"\n :help="number.errorMsg || tips"\n >\n <a-input-number :min="8" :max="12" :value="number.value" @change="handleNumberChange" />\n </a-form-item>\n </a-form>\n</template>\n<script>\nfunction validatePrimeNumber(number) {\n if (number === 11) {\n return {\n validateStatus: \'success\',\n errorMsg: null,\n };\n }\n return {\n validateStatus: \'error\',\n errorMsg: \'The prime between 8 and 12 is 11!\',\n };\n}\nexport default {\n data() {\n return {\n labelCol: { span: 7 },\n wrapperCol: { span: 12 },\n number: {\n value: 11,\n },\n tips:\n \'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.\',\n };\n },\n methods: {\n handleNumberChange(value) {\n this.number = {\n ...validatePrimeNumber(value),\n value,\n };\n },\n },\n};\n<\/script>\n',Gt=function(){var e=this.$createElement;this._self._c;return this._m(0)};Gt._withStripped=!0;var Jt=Object(o.a)({},Gt,[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[e._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[e._v("#")])]),e._v(" "),a("h3",{attrs:{id:"Form"}},[e._v("Form "),a("a",{staticClass:"anchor",attrs:{href:"#Form"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")]),e._v(" "),a("th",[e._v("默认值")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("form")]),e._v(" "),a("td",[e._v("经 "),a("code",{pre:!0},[e._v("Form.create()")]),e._v(" 包装过的组件会自带 "),a("code",{pre:!0},[e._v("this.form")]),e._v(" 属性,如果使用 template 语法,可以使用 this.$form.createForm(this, options)")]),e._v(" "),a("td",[e._v("object")]),e._v(" "),a("td",[e._v("无")])]),e._v(" "),a("tr",[a("td",[e._v("hideRequiredMark")]),e._v(" "),a("td",[e._v("隐藏所有表单项的必选标记")]),e._v(" "),a("td",[e._v("Boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("layout")]),e._v(" "),a("td",[e._v("表单布局")]),e._v(" "),a("td",[e._v("'horizontal'|'vertical'|'inline'")]),e._v(" "),a("td",[e._v("'horizontal'")])]),e._v(" "),a("tr",[a("td",[e._v("labelCol")]),e._v(" "),a("td",[e._v("label 标签布局,同 "),a("code",{pre:!0},[e._v("<Col>")]),e._v(" 组件,设置 "),a("code",{pre:!0},[e._v("span")]),e._v(" "),a("code",{pre:!0},[e._v("offset")]),e._v(" 值,如 "),a("code",{pre:!0},[e._v("{span: 3, offset: 12}")]),e._v(" 或 "),a("code",{pre:!0},[e._v("sm: {span: 3, offset: 12}")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid-cn/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("wrapperCol")]),e._v(" "),a("td",[e._v("需要为输入控件设置布局样式时,使用该属性,用法同 labelCol")]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid-cn/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("selfUpdate")]),e._v(" "),a("td",[e._v("自定义字段更新逻辑,说明"),a("a",{attrs:{href:"/components/form-cn/#selfUpdate"}},[e._v("见下")]),e._v(",需 1.3.17 版本以上")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])])])]),e._v(" "),a("h3",{attrs:{id:"事件"}},[e._v("事件 "),a("a",{staticClass:"anchor",attrs:{href:"#事件"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("事件名称")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("回调参数")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("submit")]),e._v(" "),a("td",[e._v("数据验证成功后回调事件")]),e._v(" "),a("td",[e._v("Function(e:Event)")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.create(options)-|-this.$form.createForm(this,-options)"}},[e._v("Form.create(options) | this.$form.createForm(this, options) "),a("a",{staticClass:"anchor",attrs:{href:"#Form.create(options)-|-this.$form.createForm(this,-options)"}},[e._v("#")])]),e._v(" "),a("p",[e._v("使用方式如下:")]),e._v(" "),a("h4",{attrs:{id:"jsx-使用方式,使用方式和-React-版-antd-一致"}},[e._v("jsx 使用方式,使用方式和 React 版 antd 一致 "),a("a",{staticClass:"anchor",attrs:{href:"#jsx-使用方式,使用方式和-React-版-antd-一致"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" CustomizedForm = {};\n\nCustomizedForm = Form.create({})(CustomizedForm);\n")])]),e._v(" "),a("p",[e._v("如果需要为包装组件实例维护一个 ref,可以使用"),a("code",{pre:!0},[e._v("wrappedComponentRef")]),e._v("。")]),e._v(" "),a("h4",{attrs:{id:"单文件-template-使用方式"}},[e._v("单文件 template 使用方式 "),a("a",{staticClass:"anchor",attrs:{href:"#单文件-template-使用方式"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("a-form")]),e._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[e._v(":form")]),e._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"form"')]),e._v(" />")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("</"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[e._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("export")]),e._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("default")]),e._v(" {\n beforeCreate() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".form = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$form.createForm("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(", options);\n },\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("</"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),e._v("\n")])]),e._v(" "),a("p",[a("code",{pre:!0},[e._v("options")]),e._v(" 的配置项如下。")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("props")]),e._v(" "),a("td",[e._v("仅仅支持 Form.create({})(CustomizedForm)的使用方式,父组件需要映射到表单项上的属性声明(和"),a("a",{attrs:{href:"https://vuejs.org/v2/api/#props"}},[e._v("vue 组件 props 一致")]),e._v(")")]),e._v(" "),a("td",[e._v("{}")])]),e._v(" "),a("tr",[a("td",[e._v("mapPropsToFields")]),e._v(" "),a("td",[e._v("把父组件的属性映射到表单项上(如:把 Redux store 中的值读出),需要对返回值中的表单域数据用 "),a("a",{attrs:{href:"#Form.createFormField"}},[a("code",{pre:!0},[e._v("Form.createFormField")])]),e._v(" 标记,如果使用$form.createForm 创建收集器,你可以将任何数据映射到 Field 中,不受父组件约束")]),e._v(" "),a("td",[e._v("(props) => ({ [fieldName]: FormField { value } })")])]),e._v(" "),a("tr",[a("td",[e._v("name")]),e._v(" "),a("td",[e._v("设置表单域内字段 id 的前缀")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("validateMessages")]),e._v(" "),a("td",[e._v("默认校验信息,可用于把默认错误信息改为中文等,格式与 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator/blob/master/src/messages.js"}},[e._v("newMessages")]),e._v(" 返回值一致")]),e._v(" "),a("td",[e._v("Object { [nested.path]: String }")])]),e._v(" "),a("tr",[a("td",[e._v("onFieldsChange")]),e._v(" "),a("td",[e._v("当 "),a("code",{pre:!0},[e._v("Form.Item")]),e._v(" 子节点的值发生改变时触发,可以把对应的值转存到 Redux store")]),e._v(" "),a("td",[e._v("Function(props, fields)")])]),e._v(" "),a("tr",[a("td",[e._v("onValuesChange")]),e._v(" "),a("td",[e._v("任一表单域的值发生改变时的回调")]),e._v(" "),a("td",[e._v("(props, values) => void")])])])]),e._v(" "),a("p",[e._v("经过 "),a("code",{pre:!0},[e._v("Form.create")]),e._v(" 包装的组件将会自带 "),a("code",{pre:!0},[e._v("this.form")]),e._v(" 属性,"),a("code",{pre:!0},[e._v("this.form")]),e._v(" 提供的 API 如下:")]),e._v(" "),a("blockquote",[a("p",[e._v("注意:使用 "),a("code",{pre:!0},[e._v("getFieldsValue")]),e._v(" "),a("code",{pre:!0},[e._v("getFieldValue")]),e._v(" "),a("code",{pre:!0},[e._v("setFieldsValue")]),e._v(" 等时,应确保对应的 field 已经用 "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 或 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 注册过了。")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("方法")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("getFieldDecorator")]),e._v(" "),a("td",[e._v("用于和表单进行双向绑定,单文件 template 可以使用指令"),a("code",{pre:!0},[e._v("v-decorator")]),e._v("进行绑定,详见下方描述")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("getFieldError")]),e._v(" "),a("td",[e._v("获取某个输入控件的 Error")]),e._v(" "),a("td",[e._v("Function(name)")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldsError")]),e._v(" "),a("td",[e._v("获取一组输入控件的 Error ,如不传入参数,则获取全部组件的 Error")]),e._v(" "),a("td",[e._v("Function([names: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldsValue")]),e._v(" "),a("td",[e._v("获取一组输入控件的值,如不传入参数,则获取全部组件的值")]),e._v(" "),a("td",[e._v("Function([fieldNames: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldValue")]),e._v(" "),a("td",[e._v("获取一个输入控件的值")]),e._v(" "),a("td",[e._v("Function(fieldName: string)")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldsTouched")]),e._v(" "),a("td",[e._v("判断是否任一输入控件经历过 "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 或 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 的值收集时机 "),a("code",{pre:!0},[e._v("options.trigger")])]),e._v(" "),a("td",[e._v("(names?: string[]) => boolean")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldTouched")]),e._v(" "),a("td",[e._v("判断一个输入控件是否经历过 "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 或 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 的值收集时机 "),a("code",{pre:!0},[e._v("options.trigger")])]),e._v(" "),a("td",[e._v("(name: string) => boolean")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldValidating")]),e._v(" "),a("td",[e._v("判断一个输入控件是否在校验状态")]),e._v(" "),a("td",[e._v("Function(name)")])]),e._v(" "),a("tr",[a("td",[e._v("resetFields")]),e._v(" "),a("td",[e._v("重置一组输入控件的值(为 "),a("code",{pre:!0},[e._v("initialValue")]),e._v(")与状态,如不传入参数,则重置所有组件")]),e._v(" "),a("td",[e._v("Function([names: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("setFields")]),e._v(" "),a("td",[e._v("设置一组输入控件的值与错误状态。")]),e._v(" "),a("td",[e._v("Function({ [fieldName]: { value: any, errors: [Error] } })")])]),e._v(" "),a("tr",[a("td",[e._v("setFieldsValue")]),e._v(" "),a("td",[e._v("设置一组输入控件的值")]),e._v(" "),a("td",[e._v("Function({ [fieldName]: value })")])]),e._v(" "),a("tr",[a("td",[e._v("validateFields")]),e._v(" "),a("td",[e._v("校验并获取一组输入域的值与 Error,若 fieldNames 参数为空,则校验全部组件")]),e._v(" "),a("td",[e._v("Function([fieldNames: string[]], [options: object], callback: Function(errors, values))")])]),e._v(" "),a("tr",[a("td",[e._v("validateFieldsAndScroll")]),e._v(" "),a("td",[e._v("与 "),a("code",{pre:!0},[e._v("validateFields")]),e._v(" 相似,但校验完后,如果校验不通过的菜单域不在可见范围内,则自动滚动进可见范围")]),e._v(" "),a("td",[e._v("参考 "),a("code",{pre:!0},[e._v("validateFields")])])])])]),e._v(" "),a("h3",{attrs:{id:"validateFields/validateFieldsAndScroll"}},[e._v("validateFields/validateFieldsAndScroll "),a("a",{staticClass:"anchor",attrs:{href:"#validateFields/validateFieldsAndScroll"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[e._v("form")]),e._v(": { validateFields },\n} = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(";\nvalidateFields("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[e._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[e._v("errors, values")]),e._v(") =>")]),e._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\nvalidateFields(["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field1'")]),e._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field2'")]),e._v("], (errors, values) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\nvalidateFields(["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field1'")]),e._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field2'")]),e._v("], options, (errors, values) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\n")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")]),e._v(" "),a("th",[e._v("默认值")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("options.first")]),e._v(" "),a("td",[e._v("若为 true,则每一表单域的都会在碰到第一个失败了的校验规则后停止校验")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.firstFields")]),e._v(" "),a("td",[e._v("指定表单域会在碰到第一个失败了的校验规则后停止校验")]),e._v(" "),a("td",[e._v("String[]")]),e._v(" "),a("td",[e._v("[]")])]),e._v(" "),a("tr",[a("td",[e._v("options.force")]),e._v(" "),a("td",[e._v("对已经校验过的表单域,在 validateTrigger 再次被触发时是否再次校验")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.scroll")]),e._v(" "),a("td",[e._v("定义 validateFieldsAndScroll 的滚动行为,详细配置见 "),a("a",{attrs:{href:"https://github.com/yiminghe/dom-scroll-into-view#function-parameter"}},[e._v("dom-scroll-into-view config")])]),e._v(" "),a("td",[e._v("Object")]),e._v(" "),a("td",[e._v("{}")])])])]),e._v(" "),a("h4",{attrs:{id:"validateFields-的-callback-参数示例"}},[e._v("validateFields 的 callback 参数示例 "),a("a",{staticClass:"anchor",attrs:{href:"#validateFields-的-callback-参数示例"}},[e._v("#")])]),e._v(" "),a("ul",[a("li",[a("p",[a("code",{pre:!0},[e._v("errors")]),e._v(":")]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"errors"')]),e._v(": [\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"message"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"Please input your username!"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"field"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v("\n }\n ]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"errors"')]),e._v(": [\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"message"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"Please input your Password!"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"field"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v("\n }\n ]\n }\n}\n")])])]),e._v(" "),a("li",[a("p",[a("code",{pre:!0},[e._v("values")]),e._v(":")]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"username"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(",\n}\n")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.createFormField"}},[e._v("Form.createFormField "),a("a",{staticClass:"anchor",attrs:{href:"#Form.createFormField"}},[e._v("#")])]),e._v(" "),a("p",[e._v("用于标记 "),a("code",{pre:!0},[e._v("mapPropsToFields")]),e._v(" 返回的表单域数据,"),a("a",{attrs:{href:"#components-form-demo-global-state"}},[e._v("例子")]),e._v("。")]),e._v(" "),a("h3",{attrs:{id:'this.form.getFieldDecorator(id,-options)-和-v-decorator="[id,-options]"'}},[e._v('this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]" '),a("a",{staticClass:"anchor",attrs:{href:'#this.form.getFieldDecorator(id,-options)-和-v-decorator="[id,-options]"'}},[e._v("#")])]),e._v(" "),a("p",[e._v("经过 "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v("或"),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 包装的控件,表单控件会自动添加 "),a("code",{pre:!0},[e._v("value")]),e._v("(或 "),a("code",{pre:!0},[e._v("valuePropName")]),e._v(" 指定的其他属性) "),a("code",{pre:!0},[e._v("onChange")]),e._v("(或 "),a("code",{pre:!0},[e._v("trigger")]),e._v(" 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:")]),e._v(" "),a("ol",[a("li",[e._v("你"),a("strong",[e._v("不再需要也不应该")]),e._v("用 "),a("code",{pre:!0},[e._v("onChange")]),e._v(" 来做同步,但还是可以继续监听 "),a("code",{pre:!0},[e._v("onChange")]),e._v(" 等事件。")]),e._v(" "),a("li",[e._v("你不能用控件的 "),a("code",{pre:!0},[e._v("value")]),e._v(" "),a("code",{pre:!0},[e._v("defaultValue")]),e._v(" 等属性来设置表单域的值,默认值可以用 "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 或 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 里的 "),a("code",{pre:!0},[e._v("initialValue")]),e._v("。")]),e._v(" "),a("li",[e._v("你不应该用 "),a("code",{pre:!0},[e._v("v-model")]),e._v(",可以使用 "),a("code",{pre:!0},[e._v("this.form.setFieldsValue")]),e._v(" 来动态改变表单值。")])]),e._v(" "),a("h4",{attrs:{id:"特别注意"}},[e._v("特别注意 "),a("a",{staticClass:"anchor",attrs:{href:"#特别注意"}},[e._v("#")])]),e._v(" "),a("ol",[a("li",[a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 和 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 不能用于装饰纯函数组件。")]),e._v(" "),a("li",[a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" 和 "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" 调用不能位于纯函数组件中 "),a("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#functional"}},[e._v("https://cn.vuejs.org/v2/api/#functional")]),e._v("。")])]),e._v(" "),a("h4",{attrs:{id:'getFieldDecorator(id,-options)-和-v-decorator="[id,-options]"-参数'}},[e._v('getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数 '),a("a",{staticClass:"anchor",attrs:{href:'#getFieldDecorator(id,-options)-和-v-decorator="[id,-options]"-参数'}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")]),e._v(" "),a("th",[e._v("默认值")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("id")]),e._v(" "),a("td",[e._v("必填输入控件唯一标志。支持嵌套式的写法。")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options.getValueFromEvent")]),e._v(" "),a("td",[e._v("可以把 onChange 的参数(如 event)转化为控件的值")]),e._v(" "),a("td",[e._v("function(..args)")]),e._v(" "),a("td",[a("a",{attrs:{href:"https://github.com/react-component/form#option-object"}},[e._v("reference")])])]),e._v(" "),a("tr",[a("td",[e._v("options.initialValue")]),e._v(" "),a("td",[e._v("子节点的初始值,类型、可选值均由子节点决定(注意:由于内部校验时使用 "),a("code",{pre:!0},[e._v("===")]),e._v(" 判断是否变化,建议使用变量缓存所需设置的值而非直接使用字面量)")]),e._v(" "),a("td"),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options.normalize")]),e._v(" "),a("td",[e._v("转换默认的 value 给控件,"),a("a",{attrs:{href:"https://codesandbox.io/s/kw4l2vqqmv"}},[e._v("一个选择全部的例子")])]),e._v(" "),a("td",[e._v("function(value, prevValue, allValues): any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("options.preserve")]),e._v(" "),a("td",[e._v("即便字段不再使用,也保留该字段的值")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.rules")]),e._v(" "),a("td",[e._v("校验规则,参考下方文档")]),e._v(" "),a("td",[e._v("object[]")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options.trigger")]),e._v(" "),a("td",[e._v("收集子节点的值的时机")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateFirst")]),e._v(" "),a("td",[e._v("当某一规则校验不通过时,是否停止剩下的规则的校验")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateTrigger")]),e._v(" "),a("td",[e._v("校验子节点值的时机")]),e._v(" "),a("td",[e._v("string|string[]")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.valuePropName")]),e._v(" "),a("td",[e._v("子节点的值的属性,如 Switch 的是 'checked'")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'value'")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.Item"}},[e._v("Form.Item "),a("a",{staticClass:"anchor",attrs:{href:"#Form.Item"}},[e._v("#")])]),e._v(" "),a("p",[e._v("注意:一个 Form.Item 建议只放一个被 getFieldDecorator 或 v-decorator 装饰过的 child,当有多个被装饰过的 child 时,"),a("code",{pre:!0},[e._v("help")]),e._v(" "),a("code",{pre:!0},[e._v("required")]),e._v(" "),a("code",{pre:!0},[e._v("validateStatus")]),e._v(" 无法自动生成。")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")]),e._v(" "),a("th",[e._v("默认值")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("colon")]),e._v(" "),a("td",[e._v("配合 label 属性使用,表示是否显示 label 后面的冒号")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("true")])]),e._v(" "),a("tr",[a("td",[e._v("extra")]),e._v(" "),a("td",[e._v("额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("hasFeedback")]),e._v(" "),a("td",[e._v("配合 validateStatus 属性使用,展示校验状态图标,建议只配合 Input 组件使用")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("help")]),e._v(" "),a("td",[e._v("提示信息,如不设置,则会根据校验规则自动生成")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("label")]),e._v(" "),a("td",[e._v("label 标签的文本")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("labelCol")]),e._v(" "),a("td",[e._v("label 标签布局,同 "),a("code",{pre:!0},[e._v("<Col>")]),e._v(" 组件,设置 "),a("code",{pre:!0},[e._v("span")]),e._v(" "),a("code",{pre:!0},[e._v("offset")]),e._v(" 值,如 "),a("code",{pre:!0},[e._v("{span: 3, offset: 12}")]),e._v(" 或 "),a("code",{pre:!0},[e._v("sm: {span: 3, offset: 12}")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid-cn/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("是否必填,如不设置,则会根据校验规则自动生成")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("validateStatus")]),e._v(" "),a("td",[e._v("校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating'")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("wrapperCol")]),e._v(" "),a("td",[e._v("需要为输入控件设置布局样式时,使用该属性,用法同 labelCol")]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid-cn/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("selfUpdate")]),e._v(" "),a("td",[e._v("自定义字段更新逻辑,你可以通过 Form 的 selfUpdate 进行统一设置。当和 Form 同时设置时,以 Item 为准。 说明"),a("a",{attrs:{href:"/components/form-cn/#selfUpdate"}},[e._v("见下")]),e._v(" 需 1.3.17 版本以上")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])])])]),e._v(" "),a("h3",{attrs:{id:"校验规则"}},[e._v("校验规则 "),a("a",{staticClass:"anchor",attrs:{href:"#校验规则"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("参数")]),e._v(" "),a("th",[e._v("说明")]),e._v(" "),a("th",[e._v("类型")]),e._v(" "),a("th",[e._v("默认值")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("enum")]),e._v(" "),a("td",[e._v("枚举类型")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("len")]),e._v(" "),a("td",[e._v("字段长度")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("max")]),e._v(" "),a("td",[e._v("最大长度")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("message")]),e._v(" "),a("td",[e._v("校验文案")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("min")]),e._v(" "),a("td",[e._v("最小长度")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("pattern")]),e._v(" "),a("td",[e._v("正则表达式校验")]),e._v(" "),a("td",[e._v("RegExp")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("是否必选")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])]),e._v(" "),a("tr",[a("td",[e._v("transform")]),e._v(" "),a("td",[e._v("校验前转换字段值")]),e._v(" "),a("td",[e._v("function(value) => transformedValue:any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("type")]),e._v(" "),a("td",[e._v("内建校验类型,"),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator#type"}},[e._v("可选项")])]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'string'")])]),e._v(" "),a("tr",[a("td",[e._v("validator")]),e._v(" "),a("td",[e._v("自定义校验(注意,"),a("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/5155"}},[e._v("callback 必须被调用")]),e._v(")")]),e._v(" "),a("td",[e._v("function(rule, value, callback)")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("whitespace")]),e._v(" "),a("td",[e._v("必选时,空格是否会被视为错误")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])])])]),e._v(" "),a("p",[e._v("更多高级用法可研究 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v("。")]),e._v(" "),a("h3",{attrs:{id:"selfUpdate"}},[e._v("selfUpdate "),a("a",{staticClass:"anchor",attrs:{href:"#selfUpdate"}},[e._v("#")])]),e._v(" "),a("p",[e._v("设置 "),a("code",{pre:!0},[e._v("selfUpdate")]),e._v(" 为 "),a("code",{pre:!0},[e._v("true")]),e._v(" 后,"),a("code",{pre:!0},[e._v("Form")]),e._v(" 通过增量方式更新,只更新被修改的字段。大部分场景下,你只需要编写代码即可。而在某些特定场景,例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都需要进行渲染。你可以通过修改 Form.Item 取消 selfUpdate,或者在 "),a("code",{pre:!0},[e._v("change")]),e._v(" / "),a("code",{pre:!0},[e._v("onValuesChange")]),e._v(" 回调中手动调用 "),a("code",{pre:!0},[e._v("this.$forceUpdate()")]),e._v(" 更新组件。"),a("a",{attrs:{href:""}},[e._v("示例")])]),e._v(" "),a("p",[e._v("如果你并不精通 Vue,并不建议使用 selfUpdate,如果出现性能问题,可以尝试这把 Form 相关的业务独立到一个单独的组件中,减少组件渲染的消耗。")])])}],!1,null,null,null);Jt.options.__file="components/form/index.zh-CN.md";var Zt=Jt.exports,Kt=function(){var e=this.$createElement;this._self._c;return this._m(0)};Kt._withStripped=!0;var Qt=Object(o.a)({},Kt,[function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("h2",{attrs:{id:"API"}},[e._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[e._v("#")])]),e._v(" "),a("h3",{attrs:{id:"Form"}},[e._v("Form "),a("a",{staticClass:"anchor",attrs:{href:"#Form"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("form")]),e._v(" "),a("td",[e._v("Decorated by "),a("code",{pre:!0},[e._v("Form.create()")]),e._v(" will be automatically set "),a("code",{pre:!0},[e._v("this.form")]),e._v(" property, so just pass to form. If you use the template syntax, you can use "),a("code",{pre:!0},[e._v("this.$form.createForm(this, options)")])]),e._v(" "),a("td",[e._v("object")]),e._v(" "),a("td",[e._v("n/a")])]),e._v(" "),a("tr",[a("td",[e._v("hideRequiredMark")]),e._v(" "),a("td",[e._v("Hide required mark of all form items")]),e._v(" "),a("td",[e._v("Boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("layout")]),e._v(" "),a("td",[e._v("Define form layout")]),e._v(" "),a("td",[e._v("'horizontal'|'vertical'|'inline'")]),e._v(" "),a("td",[e._v("'horizontal'")])]),e._v(" "),a("tr",[a("td",[e._v("labelCol")]),e._v(" "),a("td",[e._v("The layout of label. You can set "),a("code",{pre:!0},[e._v("span")]),e._v(" "),a("code",{pre:!0},[e._v("offset")]),e._v(" to something like "),a("code",{pre:!0},[e._v("{span: 3, offset: 12}")]),e._v(" or "),a("code",{pre:!0},[e._v("sm: {span: 3, offset: 12}")]),e._v(" same as with "),a("code",{pre:!0},[e._v("<Col>")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("wrapperCol")]),e._v(" "),a("td",[e._v("The layout for input controls, same as "),a("code",{pre:!0},[e._v("labelCol")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("autoFormCreate(deprecated)")]),e._v(" "),a("td",[e._v("Automate Form.create, Recommended for use under the "),a("code",{pre:!0},[e._v("template")]),e._v(" component, and cannot be used with "),a("code",{pre:!0},[e._v("Form.create()")]),e._v(". You should use "),a("code",{pre:!0},[e._v("$form.createForm")]),e._v(" to instead it after 1.1.9.")]),e._v(" "),a("td",[e._v("Function(form)")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options(deprecated)")]),e._v(" "),a("td",[e._v("The "),a("code",{pre:!0},[e._v("options")]),e._v(" corresponding to "),a("code",{pre:!0},[e._v("Form.create(options)")]),e._v(". You should use "),a("code",{pre:!0},[e._v("$form.createForm")]),e._v(" to instead it after 1.1.9.")]),e._v(" "),a("td",[e._v("Object")]),e._v(" "),a("td",[e._v("{}")])])])]),e._v(" "),a("h3",{attrs:{id:"Events"}},[e._v("Events "),a("a",{staticClass:"anchor",attrs:{href:"#Events"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Events Name")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Arguments")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("submit")]),e._v(" "),a("td",[e._v("Defines a function will be called if form data validation is successful.")]),e._v(" "),a("td",[e._v("Function(e:Event)")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.create(options)-|-this.$form.createForm(this,-options)"}},[e._v("Form.create(options) | this.$form.createForm(this, options) "),a("a",{staticClass:"anchor",attrs:{href:"#Form.create(options)-|-this.$form.createForm(this,-options)"}},[e._v("#")])]),e._v(" "),a("p",[e._v("How to use:")]),e._v(" "),a("h4",{attrs:{id:"Used-in-jsx,-the-usage-is-consistent-with-the-React-version-of-antd"}},[e._v("Used in jsx, the usage is consistent with the React version of antd "),a("a",{staticClass:"anchor",attrs:{href:"#Used-in-jsx,-the-usage-is-consistent-with-the-React-version-of-antd"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" CustomizedForm = {};\n\nCustomizedForm = Form.create({})(CustomizedForm);\n")])]),e._v(" "),a("p",[e._v("Maintain an ref for wrapped component instance, use "),a("code",{pre:!0},[e._v("wrappedComponentRef")]),e._v(".")]),e._v(" "),a("h4",{attrs:{id:"Single-file-template-usage"}},[e._v("Single file template usage "),a("a",{staticClass:"anchor",attrs:{href:"#Single-file-template-usage"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-html"}},[a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("a-form")]),e._v(" "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[e._v(":form")]),e._v("="),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"form"')]),e._v(" />")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("</"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("template")]),e._v(">")]),e._v("\n"),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("<"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),a("span",{pre:!0,attrs:{class:"javascript"}},[e._v("\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("export")]),e._v(" "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("default")]),e._v(" {\n beforeCreate() {\n "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".form = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(".$form.createForm("),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(", options);\n },\n };\n")]),a("span",{pre:!0,attrs:{class:"hljs-tag"}},[e._v("</"),a("span",{pre:!0,attrs:{class:"hljs-name"}},[e._v("script")]),e._v(">")]),e._v("\n")])]),e._v(" "),a("p",[e._v("The following "),a("code",{pre:!0},[e._v("options")]),e._v(" are available:")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("props")]),e._v(" "),a("td",[e._v("Only supports the use of Form.create({})(CustomizedForm). declare props on form(和"),a("a",{attrs:{href:"https://vuejs.org/v2/api/#props"}},[e._v("like vue props")]),e._v(")")]),e._v(" "),a("td",[e._v("{}")])]),e._v(" "),a("tr",[a("td",[e._v("mapPropsToFields")]),e._v(" "),a("td",[e._v("Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with "),a("a",{attrs:{href:"#Form.createFormField"}},[a("code",{pre:!0},[e._v("Form.createFormField")])]),e._v(". If you use "),a("code",{pre:!0},[e._v("$form.createForm")]),e._v(" to create a collector, you can map any data to the Field without being bound by the parent component.")]),e._v(" "),a("td",[e._v("(props) => Object{ fieldName: FormField { value } }")])]),e._v(" "),a("tr",[a("td",[e._v("name")]),e._v(" "),a("td",[e._v("Set the id prefix of fields under form")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("validateMessages")]),e._v(" "),a("td",[e._v("Default validate message. And its format is similar with "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator/blob/master/src/messages.js"}},[e._v("newMessages")]),e._v("'s returned value")]),e._v(" "),a("td",[e._v("Object { [nested.path]: String }")])]),e._v(" "),a("tr",[a("td",[e._v("onFieldsChange")]),e._v(" "),a("td",[e._v("Specify a function that will be called when the value a "),a("code",{pre:!0},[e._v("Form.Item")]),e._v(" gets changed. Usage example: saving the field's value to Redux store.")]),e._v(" "),a("td",[e._v("Function(props, fields)")])]),e._v(" "),a("tr",[a("td",[e._v("onValuesChange")]),e._v(" "),a("td",[e._v("A handler while value of any field is changed")]),e._v(" "),a("td",[e._v("(props, values) => void")])])])]),e._v(" "),a("p",[e._v("If the form has been decorated by "),a("code",{pre:!0},[e._v("Form.create")]),e._v(" then it has "),a("code",{pre:!0},[e._v("this.form")]),e._v(" property. "),a("code",{pre:!0},[e._v("this.form")]),e._v(" provides some APIs as follows:")]),e._v(" "),a("blockquote",[a("p",[e._v("Note: Before using "),a("code",{pre:!0},[e._v("getFieldsValue")]),e._v(" "),a("code",{pre:!0},[e._v("getFieldValue")]),e._v(" "),a("code",{pre:!0},[e._v("setFieldsValue")]),e._v(" and so on, please make sure that corresponding field had been registered with "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(".")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Method")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("getFieldDecorator")]),e._v(" "),a("td",[e._v("Two-way binding for form, single file template can be bound using the directive "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(". please read below for details.")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("getFieldError")]),e._v(" "),a("td",[e._v("Get the error of a field.")]),e._v(" "),a("td",[e._v("Function(name)")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldsError")]),e._v(" "),a("td",[e._v("Get the specified fields' error. If you don't specify a parameter, you will get all fields' error.")]),e._v(" "),a("td",[e._v("Function([names: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldsValue")]),e._v(" "),a("td",[e._v("Get the specified fields' values. If you don't specify a parameter, you will get all fields' values.")]),e._v(" "),a("td",[e._v("Function([fieldNames: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("getFieldValue")]),e._v(" "),a("td",[e._v("Get the value of a field.")]),e._v(" "),a("td",[e._v("Function(fieldName: string)")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldsTouched")]),e._v(" "),a("td",[e._v("Check whether any of fields is touched by "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v("'s or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v("'s "),a("code",{pre:!0},[e._v("options.trigger")]),e._v(" event")]),e._v(" "),a("td",[e._v("(names?: string[]) => boolean")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldTouched")]),e._v(" "),a("td",[e._v("Check whether a field is touched by "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v("'s or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v("'s "),a("code",{pre:!0},[e._v("options.trigger")]),e._v(" event")]),e._v(" "),a("td",[e._v("(name: string) => boolean")])]),e._v(" "),a("tr",[a("td",[e._v("isFieldValidating")]),e._v(" "),a("td",[e._v("Check if the specified field is being validated.")]),e._v(" "),a("td",[e._v("Function(name)")])]),e._v(" "),a("tr",[a("td",[e._v("resetFields")]),e._v(" "),a("td",[e._v("Reset the specified fields' value(to "),a("code",{pre:!0},[e._v("initialValue")]),e._v(") and status. If you don't specify a parameter, all the fields will be reset.")]),e._v(" "),a("td",[e._v("Function([names: string[]])")])]),e._v(" "),a("tr",[a("td",[e._v("setFields")]),e._v(" "),a("td",[e._v("Set value and error state of fields.")]),e._v(" "),a("td",[e._v("({"),a("br"),e._v(" [fieldName]: {value: any, errors: [Error] }"),a("br"),e._v("}) => void")])]),e._v(" "),a("tr",[a("td",[e._v("setFieldsValue")]),e._v(" "),a("td",[e._v("Set the value of a field.")]),e._v(" "),a("td",[e._v("Function({ [fieldName]: value })")])]),e._v(" "),a("tr",[a("td",[e._v("validateFields")]),e._v(" "),a("td",[e._v("Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields.")]),e._v(" "),a("td",[e._v("("),a("br"),e._v(" [fieldNames: string[]],"),a("br"),e._v(" [options: object],"),a("br"),e._v(" callback(errors, values)"),a("br"),e._v(") => void")])]),e._v(" "),a("tr",[a("td",[e._v("validateFieldsAndScroll")]),e._v(" "),a("td",[e._v("This function is similar to "),a("code",{pre:!0},[e._v("validateFields")]),e._v(", but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area.")]),e._v(" "),a("td",[e._v("same as "),a("code",{pre:!0},[e._v("validateFields")])])])])]),e._v(" "),a("h3",{attrs:{id:"validateFields/validateFieldsAndScroll"}},[e._v("validateFields/validateFieldsAndScroll "),a("a",{staticClass:"anchor",attrs:{href:"#validateFields/validateFieldsAndScroll"}},[e._v("#")])]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-jsx"}},[a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("const")]),e._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-attr"}},[e._v("form")]),e._v(": { validateFields },\n} = "),a("span",{pre:!0,attrs:{class:"hljs-keyword"}},[e._v("this")]),e._v(";\nvalidateFields("),a("span",{pre:!0,attrs:{class:"hljs-function"}},[e._v("("),a("span",{pre:!0,attrs:{class:"hljs-params"}},[e._v("errors, values")]),e._v(") =>")]),e._v(" {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\nvalidateFields(["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field1'")]),e._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field2'")]),e._v("], (errors, values) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\nvalidateFields(["),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field1'")]),e._v(", "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v("'field2'")]),e._v("], options, (errors, values) => {\n "),a("span",{pre:!0,attrs:{class:"hljs-comment"}},[e._v("// ...")]),e._v("\n});\n")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Method")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("options.first")]),e._v(" "),a("td",[e._v("If "),a("code",{pre:!0},[e._v("true")]),e._v(", every field will stop validation at first failed rule")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.firstFields")]),e._v(" "),a("td",[e._v("Those fields will stop validation at first failed rule")]),e._v(" "),a("td",[e._v("String[]")]),e._v(" "),a("td",[e._v("[]")])]),e._v(" "),a("tr",[a("td",[e._v("options.force")]),e._v(" "),a("td",[e._v("Should validate validated field again when "),a("code",{pre:!0},[e._v("validateTrigger")]),e._v(" is been triggered again")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.scroll")]),e._v(" "),a("td",[e._v("Config scroll behavior of "),a("code",{pre:!0},[e._v("validateFieldsAndScroll")]),e._v(", more: "),a("a",{attrs:{href:"https://github.com/yiminghe/dom-scroll-into-view#function-parameter"}},[e._v("dom-scroll-into-view's config")])]),e._v(" "),a("td",[e._v("Object")]),e._v(" "),a("td",[e._v("{}")])])])]),e._v(" "),a("h4",{attrs:{id:"Callback-arguments-example-of-validateFields"}},[e._v("Callback arguments example of validateFields "),a("a",{staticClass:"anchor",attrs:{href:"#Callback-arguments-example-of-validateFields"}},[e._v("#")])]),e._v(" "),a("ul",[a("li",[a("p",[a("code",{pre:!0},[e._v("errors")]),e._v(":")]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"errors"')]),e._v(": [\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"message"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"Please input your username!"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"field"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v("\n }\n ]\n },\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(": {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"errors"')]),e._v(": [\n {\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"message"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"Please input your Password!"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"field"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v("\n }\n ]\n }\n}\n")])])]),e._v(" "),a("li",[a("p",[a("code",{pre:!0},[e._v("values")]),e._v(":")]),e._v(" "),a("pre",{pre:!0},[a("code",{pre:!0,attrs:{"v-pre":"",class:"language-js"}},[e._v("{\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"userName"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"username"')]),e._v(",\n "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(": "),a("span",{pre:!0,attrs:{class:"hljs-string"}},[e._v('"password"')]),e._v(",\n}\n")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.createFormField"}},[e._v("Form.createFormField "),a("a",{staticClass:"anchor",attrs:{href:"#Form.createFormField"}},[e._v("#")])]),e._v(" "),a("p",[e._v("To mark the returned fields data in "),a("code",{pre:!0},[e._v("mapPropsToFields")]),e._v(", "),a("a",{attrs:{href:"#components-form-demo-global-state"}},[e._v("demo")]),e._v(".")]),e._v(" "),a("h3",{attrs:{id:'this.form.getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"'}},[e._v('this.form.getFieldDecorator(id, options) and v-decorator="[id, options]" '),a("a",{staticClass:"anchor",attrs:{href:'#this.form.getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"'}},[e._v("#")])]),e._v(" "),a("p",[e._v("After wrapped by "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(", "),a("code",{pre:!0},[e._v("value")]),e._v("(or other property defined by "),a("code",{pre:!0},[e._v("valuePropName")]),e._v(") "),a("code",{pre:!0},[e._v("onChange")]),e._v("(or other property defined by "),a("code",{pre:!0},[e._v("trigger")]),e._v(") props will be added to form controls,the flow of form data will be handled by Form which will cause:")]),e._v(" "),a("ol",[a("li",[e._v("You shouldn't use "),a("code",{pre:!0},[e._v("onChange")]),e._v(" to collect data, but you still can listen to "),a("code",{pre:!0},[e._v("onChange")]),e._v("(and so on) events.")]),e._v(" "),a("li",[e._v("You cannot set value of form control via "),a("code",{pre:!0},[e._v("value")]),e._v(" "),a("code",{pre:!0},[e._v("defaultValue")]),e._v(" prop, and you should set default value with "),a("code",{pre:!0},[e._v("initialValue")]),e._v(" in "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" instead.")]),e._v(" "),a("li",[e._v("You shouldn't call "),a("code",{pre:!0},[e._v("v-model")]),e._v(" manually, please use "),a("code",{pre:!0},[e._v("this.form.setFieldsValue")]),e._v(" to change value programmatically.")])]),e._v(" "),a("h4",{attrs:{id:"Special-attention"}},[e._v("Special attention "),a("a",{staticClass:"anchor",attrs:{href:"#Special-attention"}},[e._v("#")])]),e._v(" "),a("ol",[a("li",[a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" and "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" can not be used to decorate stateless component.")]),e._v(" "),a("li",[e._v("you can't use "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" and "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" in stateless component: "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#functional"}},[e._v("https://vuejs.org/v2/api/#functional")])])]),e._v(" "),a("h4",{attrs:{id:'getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"-parameters'}},[e._v('getFieldDecorator(id, options) and v-decorator="[id, options]" parameters '),a("a",{staticClass:"anchor",attrs:{href:'#getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"-parameters'}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("id")]),e._v(" "),a("td",[e._v("The unique identifier is required. support "),a("a",{attrs:{href:"https://github.com/react-component/form/pull/48"}},[e._v("nested fields format")]),e._v(".")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options.getValueFromEvent")]),e._v(" "),a("td",[e._v("Specify how to get value from event or other onChange arguments")]),e._v(" "),a("td",[e._v("function(..args)")]),e._v(" "),a("td",[a("a",{attrs:{href:"https://github.com/react-component/form#option-object"}},[e._v("reference")])])]),e._v(" "),a("tr",[a("td",[e._v("options.getValueProps")]),e._v(" "),a("td",[e._v("Get the component props according to field value.")]),e._v(" "),a("td",[e._v("function(value): any")]),e._v(" "),a("td",[a("a",{attrs:{href:"https://github.com/react-component/form#option-object"}},[e._v("reference")])])]),e._v(" "),a("tr",[a("td",[e._v("options.initialValue")]),e._v(" "),a("td",[e._v("You can specify initial value, type, optional value of children node. (Note: Because "),a("code",{pre:!0},[e._v("Form")]),e._v(" will test equality with "),a("code",{pre:!0},[e._v("===")]),e._v(" internally, we recommend to use variable as "),a("code",{pre:!0},[e._v("initialValue")]),e._v(", instead of literal)")]),e._v(" "),a("td"),e._v(" "),a("td",[e._v("n/a")])]),e._v(" "),a("tr",[a("td",[e._v("options.normalize")]),e._v(" "),a("td",[e._v("Normalize value to form component, "),a("a",{attrs:{href:"https://codesandbox.io/s/kw4l2vqqmv"}},[e._v("a select-all example")])]),e._v(" "),a("td",[e._v("function(value, prevValue, allValues): any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("options.preserve")]),e._v(" "),a("td",[e._v("Keep the field even if field removed")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.rules")]),e._v(" "),a("td",[e._v('Includes validation rules. Please refer to "Validation Rules" part for details.')]),e._v(" "),a("td",[e._v("object[]")]),e._v(" "),a("td",[e._v("n/a")])]),e._v(" "),a("tr",[a("td",[e._v("options.trigger")]),e._v(" "),a("td",[e._v("When to collect the value of children node")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateFirst")]),e._v(" "),a("td",[e._v("Whether stop validate on first rule of error for this field.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateTrigger")]),e._v(" "),a("td",[e._v("When to validate the value of children node.")]),e._v(" "),a("td",[e._v("string|string[]")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.valuePropName")]),e._v(" "),a("td",[e._v("Props of children node, for example, the prop of Switch is 'checked'.")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'value'")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.Item"}},[e._v("Form.Item "),a("a",{staticClass:"anchor",attrs:{href:"#Form.Item"}},[e._v("#")])]),e._v(" "),a("p",[e._v("Note: If Form.Item has multiple children that had been decorated by "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(", "),a("code",{pre:!0},[e._v("help")]),e._v(" and "),a("code",{pre:!0},[e._v("required")]),e._v(" and "),a("code",{pre:!0},[e._v("validateStatus")]),e._v(" can't be generated automatically.")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("colon")]),e._v(" "),a("td",[e._v("Used with "),a("code",{pre:!0},[e._v("label")]),e._v(", whether to display "),a("code",{pre:!0},[e._v(":")]),e._v(" after label text.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("true")])]),e._v(" "),a("tr",[a("td",[e._v("extra")]),e._v(" "),a("td",[e._v("The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("hasFeedback")]),e._v(" "),a("td",[e._v("Used with "),a("code",{pre:!0},[e._v("validateStatus")]),e._v(", this option specifies the validation status icon. Recommended to be used only with "),a("code",{pre:!0},[e._v("Input")]),e._v(".")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("help")]),e._v(" "),a("td",[e._v("The prompt message. If not provided, the prompt message will be generated by the validation rule.")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("label")]),e._v(" "),a("td",[e._v("Label text")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("labelCol")]),e._v(" "),a("td",[e._v("The layout of label. You can set "),a("code",{pre:!0},[e._v("span")]),e._v(" "),a("code",{pre:!0},[e._v("offset")]),e._v(" to something like "),a("code",{pre:!0},[e._v("{span: 3, offset: 12}")]),e._v(" or "),a("code",{pre:!0},[e._v("sm: {span: 3, offset: 12}")]),e._v(" same as with "),a("code",{pre:!0},[e._v("<Col>")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("Whether provided or not, it will be generated by the validation rule.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("validateStatus")]),e._v(" "),a("td",[e._v("The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("wrapperCol")]),e._v(" "),a("td",[e._v("The layout for input controls, same as "),a("code",{pre:!0},[e._v("labelCol")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")])])]),e._v(" "),a("h3",{attrs:{id:"Validation-Rules"}},[e._v("Validation Rules "),a("a",{staticClass:"anchor",attrs:{href:"#Validation-Rules"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("enum")]),e._v(" "),a("td",[e._v("validate a value from a list of possible values")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("len")]),e._v(" "),a("td",[e._v("validate an exact length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("max")]),e._v(" "),a("td",[e._v("validate a max length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("message")]),e._v(" "),a("td",[e._v("validation error message")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("min")]),e._v(" "),a("td",[e._v("validate a min length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("pattern")]),e._v(" "),a("td",[e._v("validate from a regular expression")]),e._v(" "),a("td",[e._v("RegExp")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("indicates whether field is required")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])]),e._v(" "),a("tr",[a("td",[e._v("transform")]),e._v(" "),a("td",[e._v("transform a value before validation")]),e._v(" "),a("td",[e._v("function(value) => transformedValue:any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("type")]),e._v(" "),a("td",[e._v("built-in validation type, "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator#type"}},[e._v("available options")])]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'string'")])]),e._v(" "),a("tr",[a("td",[e._v("validator")]),e._v(" "),a("td",[e._v("custom validate function (Note: "),a("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/5155"}},[e._v("callback must be called")]),e._v(")")]),e._v(" "),a("td",[e._v("function(rule, value, callback)")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("whitespace")]),e._v(" "),a("td",[e._v("treat required fields that only contain whitespace as errors")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])])])]),e._v(" "),a("p",[e._v("See more advanced usage at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])])}],!1,null,null,null);Qt.options.__file="components/form/index.en-US.md";var Xt=Qt.exports,ea="# Form 表单\n 具有数据收集、校验和提交功能的表单,包含复选框、单选框、输入框、下拉选择框等元素。\n\n## 表单\n\n我们为 `form` 提供了以下三种排列方式:\n\n- 水平排列:标签和表单控件水平排列;(默认)\n- 垂直排列:标签和表单控件上下垂直排列;\n- 行内排列:表单项水平行内排列。\n\n## 表单域\n\n表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等。\n\n这里我们封装了表单域 `<Form.Item />` 。\n\n\n ## 注意: \n1、如果使用 `Form.create` 处理表单使其具有自动收集数据并校验的功能,建议使用`jsx`。\n2、如果不是使用Vue.use(Form)形式注册的`Form`组件,你需要自行将`$form`挂载到Vue原型上。\n`Vue.prototype.$form = Form`\n\n\n## 代码演示\n ",ta="# Form\n Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.\n\n## Form\n\nYou can align the controls of a `form` using the `layout` prop:\n\n- `horizontal`:to horizontally align the `label`s and controls of the fields. (Default)\n- `vertical`:to vertically align the `label`s and controls of the fields.\n- `inline`:to render form fields in one line.\n\n## Form fields\n\nA form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.\nA form field is defined using `<Form.Item />`.\n\n ## Note:\n1. If you use `Form.create` to process the form to have the ability to automatically collect data and verify it, it is recommended to use `jsx`.\n2. If you are not using the `Form` component registered in Vue.use(Form) form, you need to mount `$form` to the Vue prototype yourself.\n`Vue.prototype.$form = Form`\n\n## Examples\n ",aa={category:"Components",subtitle:"表单",type:"Data Entry",zhType:"数据录入",cols:1,title:"Form",render:function(){var e=arguments[0];return e("div",[e("md",{attrs:{cn:ea,us:ta}}),e("demo-container",{attrs:{code:w}},[e(y)]),e("demo-container",{attrs:{code:ee}},[e(X)]),e("demo-container",{attrs:{code:Ee}},[e(qe)]),e("demo-container",{attrs:{code:We}},[e(He)]),e("demo-container",{attrs:{code:Yt}},[e(Et)]),e("demo-container",{attrs:{code:Bt}},[e(Wt)]),e("demo-container",{attrs:{code:c}},[e(m)]),e("demo-container",{attrs:{code:V}},[e(D)]),e("demo-container",{attrs:{code:O}},[e(A)]),e("demo-container",{attrs:{code:ve}},[e(le)]),e("demo-container",{attrs:{code:ge}},[e(he)]),e("demo-container",{attrs:{code:je}},[e(Pe)]),e("demo-container",{attrs:{code:tt}},[e(et)]),e("demo-container",{attrs:{code:mt}},[e(dt)]),e("demo-container",{attrs:{code:yt}},[e(bt)]),e("demo-container",{attrs:{code:Nt}},[e(St)]),e("api",[e(Zt,{slot:"cn"}),e(Xt)])])}},na=(a(1404),Object(o.a)(aa,void 0,void 0,!1,null,null,null));na.options.__file="components/form/demo/index.vue";t.default=na.exports}}]); |