(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 controls，the flow of form data will be handled by Form which will cause:")]),e._v(" "),a("ol",[a("li",[e._v("You shouldn't use "),a("code",{pre:!0},[e._v("onChange")]),e._v(" to collect data, but you still can listen to "),a("code",{pre:!0},[e._v("onChange")]),e._v("(and so on) events.")]),e._v(" "),a("li",[e._v("You cannot set value of form control via "),a("code",{pre:!0},[e._v("value")]),e._v(" "),a("code",{pre:!0},[e._v("defaultValue")]),e._v(" prop, and you should set default value with "),a("code",{pre:!0},[e._v("initialValue")]),e._v(" in "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" instead.")]),e._v(" "),a("li",[e._v("You shouldn't call "),a("code",{pre:!0},[e._v("v-model")]),e._v(" manually, please use "),a("code",{pre:!0},[e._v("this.form.setFieldsValue")]),e._v(" to change value programmatically.")])]),e._v(" "),a("h4",{attrs:{id:"Special-attention"}},[e._v("Special attention "),a("a",{staticClass:"anchor",attrs:{href:"#Special-attention"}},[e._v("#")])]),e._v(" "),a("ol",[a("li",[a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" and "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" can not be used to decorate stateless component.")]),e._v(" "),a("li",[e._v("you can't use "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" and "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(" in stateless component: "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#functional"}},[e._v("https://vuejs.org/v2/api/#functional")])])]),e._v(" "),a("h4",{attrs:{id:'getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"-parameters'}},[e._v('getFieldDecorator(id, options) and v-decorator="[id, options]" parameters '),a("a",{staticClass:"anchor",attrs:{href:'#getFieldDecorator(id,-options)-and-v-decorator="[id,-options]"-parameters'}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("id")]),e._v(" "),a("td",[e._v("The unique identifier is required. support "),a("a",{attrs:{href:"https://github.com/react-component/form/pull/48"}},[e._v("nested fields format")]),e._v(".")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("options.getValueFromEvent")]),e._v(" "),a("td",[e._v("Specify how to get value from event or other onChange arguments")]),e._v(" "),a("td",[e._v("function(..args)")]),e._v(" "),a("td",[a("a",{attrs:{href:"https://github.com/react-component/form#option-object"}},[e._v("reference")])])]),e._v(" "),a("tr",[a("td",[e._v("options.getValueProps")]),e._v(" "),a("td",[e._v("Get the component props according to field value.")]),e._v(" "),a("td",[e._v("function(value): any")]),e._v(" "),a("td",[a("a",{attrs:{href:"https://github.com/react-component/form#option-object"}},[e._v("reference")])])]),e._v(" "),a("tr",[a("td",[e._v("options.initialValue")]),e._v(" "),a("td",[e._v("You can specify initial value, type, optional value of children node. (Note: Because "),a("code",{pre:!0},[e._v("Form")]),e._v(" will test equality with "),a("code",{pre:!0},[e._v("===")]),e._v(" internally, we recommend to use variable as "),a("code",{pre:!0},[e._v("initialValue")]),e._v(", instead of literal)")]),e._v(" "),a("td"),e._v(" "),a("td",[e._v("n/a")])]),e._v(" "),a("tr",[a("td",[e._v("options.normalize")]),e._v(" "),a("td",[e._v("Normalize value to form component, "),a("a",{attrs:{href:"https://codesandbox.io/s/kw4l2vqqmv"}},[e._v("a select-all example")])]),e._v(" "),a("td",[e._v("function(value, prevValue, allValues): any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("options.preserve")]),e._v(" "),a("td",[e._v("Keep the field even if field removed")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.rules")]),e._v(" "),a("td",[e._v('Includes validation rules. Please refer to "Validation Rules" part for details.')]),e._v(" "),a("td",[e._v("object[]")]),e._v(" "),a("td",[e._v("n/a")])]),e._v(" "),a("tr",[a("td",[e._v("options.trigger")]),e._v(" "),a("td",[e._v("When to collect the value of children node")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateFirst")]),e._v(" "),a("td",[e._v("Whether stop validate on first rule of error for this field.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("options.validateTrigger")]),e._v(" "),a("td",[e._v("When to validate the value of children node.")]),e._v(" "),a("td",[e._v("string|string[]")]),e._v(" "),a("td",[e._v("'change'")])]),e._v(" "),a("tr",[a("td",[e._v("options.valuePropName")]),e._v(" "),a("td",[e._v("Props of children node, for example, the prop of Switch is 'checked'.")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'value'")])])])]),e._v(" "),a("h3",{attrs:{id:"Form.Item"}},[e._v("Form.Item "),a("a",{staticClass:"anchor",attrs:{href:"#Form.Item"}},[e._v("#")])]),e._v(" "),a("p",[e._v("Note: If Form.Item has multiple children that had been decorated by "),a("code",{pre:!0},[e._v("getFieldDecorator")]),e._v(" or "),a("code",{pre:!0},[e._v("v-decorator")]),e._v(", "),a("code",{pre:!0},[e._v("help")]),e._v(" and "),a("code",{pre:!0},[e._v("required")]),e._v(" and "),a("code",{pre:!0},[e._v("validateStatus")]),e._v(" can't be generated automatically.")]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("colon")]),e._v(" "),a("td",[e._v("Used with "),a("code",{pre:!0},[e._v("label")]),e._v(", whether to display "),a("code",{pre:!0},[e._v(":")]),e._v(" after label text.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("true")])]),e._v(" "),a("tr",[a("td",[e._v("extra")]),e._v(" "),a("td",[e._v("The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time.")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("hasFeedback")]),e._v(" "),a("td",[e._v("Used with "),a("code",{pre:!0},[e._v("validateStatus")]),e._v(", this option specifies the validation status icon. Recommended to be used only with "),a("code",{pre:!0},[e._v("Input")]),e._v(".")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("help")]),e._v(" "),a("td",[e._v("The prompt message. If not provided, the prompt message will be generated by the validation rule.")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("label")]),e._v(" "),a("td",[e._v("Label text")]),e._v(" "),a("td",[e._v("string|slot")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("labelCol")]),e._v(" "),a("td",[e._v("The layout of label. You can set "),a("code",{pre:!0},[e._v("span")]),e._v(" "),a("code",{pre:!0},[e._v("offset")]),e._v(" to something like "),a("code",{pre:!0},[e._v("{span: 3, offset: 12}")]),e._v(" or "),a("code",{pre:!0},[e._v("sm: {span: 3, offset: 12}")]),e._v(" same as with "),a("code",{pre:!0},[e._v("<Col>")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("Whether provided or not, it will be generated by the validation rule.")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[e._v("false")])]),e._v(" "),a("tr",[a("td",[e._v("validateStatus")]),e._v(" "),a("td",[e._v("The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating'")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td")]),e._v(" "),a("tr",[a("td",[e._v("wrapperCol")]),e._v(" "),a("td",[e._v("The layout for input controls, same as "),a("code",{pre:!0},[e._v("labelCol")])]),e._v(" "),a("td",[a("a",{attrs:{href:"/components/grid/#Col"}},[e._v("object")])]),e._v(" "),a("td")])])]),e._v(" "),a("h3",{attrs:{id:"Validation-Rules"}},[e._v("Validation Rules "),a("a",{staticClass:"anchor",attrs:{href:"#Validation-Rules"}},[e._v("#")])]),e._v(" "),a("table",[a("thead",[a("tr",[a("th",[e._v("Property")]),e._v(" "),a("th",[e._v("Description")]),e._v(" "),a("th",[e._v("Type")]),e._v(" "),a("th",[e._v("Default Value")])])]),e._v(" "),a("tbody",[a("tr",[a("td",[e._v("enum")]),e._v(" "),a("td",[e._v("validate a value from a list of possible values")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("len")]),e._v(" "),a("td",[e._v("validate an exact length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("max")]),e._v(" "),a("td",[e._v("validate a max length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("message")]),e._v(" "),a("td",[e._v("validation error message")]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("min")]),e._v(" "),a("td",[e._v("validate a min length of a field")]),e._v(" "),a("td",[e._v("number")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("pattern")]),e._v(" "),a("td",[e._v("validate from a regular expression")]),e._v(" "),a("td",[e._v("RegExp")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("required")]),e._v(" "),a("td",[e._v("indicates whether field is required")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])]),e._v(" "),a("tr",[a("td",[e._v("transform")]),e._v(" "),a("td",[e._v("transform a value before validation")]),e._v(" "),a("td",[e._v("function(value) => transformedValue:any")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("type")]),e._v(" "),a("td",[e._v("built-in validation type, "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator#type"}},[e._v("available options")])]),e._v(" "),a("td",[e._v("string")]),e._v(" "),a("td",[e._v("'string'")])]),e._v(" "),a("tr",[a("td",[e._v("validator")]),e._v(" "),a("td",[e._v("custom validate function (Note: "),a("a",{attrs:{href:"https://github.com/ant-design/ant-design/issues/5155"}},[e._v("callback must be called")]),e._v(")")]),e._v(" "),a("td",[e._v("function(rule, value, callback)")]),e._v(" "),a("td",[e._v("-")])]),e._v(" "),a("tr",[a("td",[e._v("whitespace")]),e._v(" "),a("td",[e._v("treat required fields that only contain whitespace as errors")]),e._v(" "),a("td",[e._v("boolean")]),e._v(" "),a("td",[a("code",{pre:!0},[e._v("false")])])])])]),e._v(" "),a("p",[e._v("See more advanced usage at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[e._v("async-validator")]),e._v(".")])])}],!1,null,null,null);Qt.options.__file="components/form/index.en-US.md";var Xt=Qt.exports,ea="# Form 表单\n           具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。\n\n## 表单\n\n我们为 `form` 提供了以下三种排列方式：\n\n- 水平排列：标签和表单控件水平排列；（默认）\n- 垂直排列：标签和表单控件上下垂直排列；\n- 行内排列：表单项水平行内排列。\n\n## 表单域\n\n表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。\n\n这里我们封装了表单域 `<Form.Item />` 。\n\n\n ## 注意： \n1、如果使用 `Form.create` 处理表单使其具有自动收集数据并校验的功能，建议使用`jsx`。\n2、如果不是使用Vue.use(Form)形式注册的`Form`组件，你需要自行将`$form`挂载到Vue原型上。\n`Vue.prototype.$form = Form`\n\n\n## 代码演示\n        ",ta="# Form\n           Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.\n\n## Form\n\nYou can align the controls of a `form` using the `layout` prop：\n\n- `horizontal`：to horizontally align the `label`s and controls of the fields. (Default)\n- `vertical`：to vertically align the `label`s and controls of the fields.\n- `inline`：to render form fields in one line.\n\n## Form fields\n\nA form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.\nA form field is defined using `<Form.Item />`.\n\n ## Note:\n1. If you use `Form.create` to process the form to have the ability to automatically collect data and verify it, it is recommended to use `jsx`.\n2. If you are not using the `Form` component registered in Vue.use(Form) form, you need to mount `$form` to the Vue prototype yourself.\n`Vue.prototype.$form = Form`\n\n## Examples\n        ",aa={category:"Components",subtitle:"表单",type:"Data Entry",zhType:"数据录入",cols:1,title:"Form",render:function(){var e=arguments[0];return e("div",[e("md",{attrs:{cn:ea,us:ta}}),e("demo-container",{attrs:{code:w}},[e(y)]),e("demo-container",{attrs:{code:ee}},[e(X)]),e("demo-container",{attrs:{code:Ee}},[e(qe)]),e("demo-container",{attrs:{code:We}},[e(He)]),e("demo-container",{attrs:{code:Yt}},[e(Et)]),e("demo-container",{attrs:{code:Bt}},[e(Wt)]),e("demo-container",{attrs:{code:c}},[e(m)]),e("demo-container",{attrs:{code:V}},[e(D)]),e("demo-container",{attrs:{code:O}},[e(A)]),e("demo-container",{attrs:{code:ve}},[e(le)]),e("demo-container",{attrs:{code:ge}},[e(he)]),e("demo-container",{attrs:{code:je}},[e(Pe)]),e("demo-container",{attrs:{code:tt}},[e(et)]),e("demo-container",{attrs:{code:mt}},[e(dt)]),e("demo-container",{attrs:{code:yt}},[e(bt)]),e("demo-container",{attrs:{code:Nt}},[e(St)]),e("api",[e(Zt,{slot:"cn"}),e(Xt)])])}},na=(a(1404),Object(o.a)(aa,void 0,void 0,!1,null,null,null));na.options.__file="components/form/demo/index.vue";t.default=na.exports}}]);