ant-design-vue/4d95fb2e.async.js

1 line
156 KiB
JavaScript
Raw Permalink Blame History

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

(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&&lt()(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&nbsp;\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 controlsthe 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}}]);