muse-vue-ant-design-dashboard/documentation/_nuxt/d859f57.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[18,2,3],{1179:function(t,e,n){"use strict";n.r(e);n(106),n(640);var o={props:["anchors"],data:function(){return{url:""}},beforeMount:function(){this.url=window.location.href.split("#")[0]}},r=n(81),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"page-anchor"},[n("a-anchor",{attrs:{targetOffset:80,offsetTop:85}},t._l(t.anchors,(function(title,e){return n("a-anchor-link",{key:e,attrs:{href:t.url+"#"+e,title:title}})})),1)],1)}),[],!1,null,null,null);e.default=component.exports},1180:function(t,e,n){"use strict";n.r(e);var o={inheritAttrs:!0,props:["code","lang"],data:function(){return{}},methods:{onCopy:function(t){this.$message.success({content:"Copied!"})}}},r=n(81),component=Object(r.a)(o,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"highlight-section"},[n("a-button",{directives:[{name:"clipboard",rawName:"v-clipboard:copy",value:t.code.trim(),expression:"code.trim()",arg:"copy"},{name:"clipboard",rawName:"v-clipboard:success",value:t.onCopy,expression:"onCopy",arg:"success"}],staticClass:"btn-copy",attrs:{type:"primary",icon:"copy",size:"small"}},[t._v("Copy")]),t._v(" "),n("highlight-code",{staticStyle:{"max-height":"500px"},attrs:{lang:t.lang?t.lang:"html"}},[t._v("\n\t\t"+t._s(t.code)+"\n\t")])],1)}),[],!1,null,null,null);e.default=component.exports},1232:function(t,e,n){"use strict";n.r(e);var o={labelCol:{span:4},wrapperCol:{span:8}},r={labelCol:{span:4},wrapperCol:{span:8,offset:4}},l={head:function(){return{title:"Form | Muse Vue Ant Design Dashboard @ Creative Tim",meta:[{hid:"description",name:"description",content:"Form is used to collect, validate, and submit the user input, usually\n\t\t\t\t\t\tcontains various form items including checkbox, radio, input, select,\n\t\t\t\t\t\tand etc."}]}},data:function(){return{anchors:{"When-To-Use":"When To Use","Coordinated-Controls":"Coordinated Controls","Dynamic-Rules":"Dynamic Rules"},formLayout:"horizontal",form:this.$form.createForm(this,{name:"coordinated"}),checkNick:!1,formItemLayout:o,formTailLayout:r,dynamicRulesForm:this.$form.createForm(this,{name:"dynamic_rule"}),codeSample:'\n<template>\n  <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">\n    <a-form-item label="Note">\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">\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>',dynamicRulesCode:'\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>'}},methods:{handleSubmit:function(t){t.preventDefault(),this.form.validateFields((function(t,e){t||console.log("Received values of form: ",e)}))},handleSelectChange:function(t){this.form.setFieldsValue({note:"Hi, ".concat("male"===t?"man":"lady","!")})},check:function(){this.dynamicRulesForm.validateFields((function(t,e){t||console.info("success")}))},handleChange:function(t){var e=this;this.checkNick=t.target.checked,this.$nextTick((function(){e.dynamicRulesForm.validateFields(["nickname"],{force:!0})}))}}},c=n(81),component=Object(c.a)(l,(function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",[n("div",{staticClass:"page-row"},[n("div",{staticClass:"page-content"},[t._m(0),t._v(" "),n("a-divider"),t._v(" "),t._m(1),t._v(" "),n("h2",[t._v("Examples")]),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Coordinated-Controls"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Coordinated Controls")]),t._v(" "),t._m(2),t._v(" "),n("div",{staticClass:"showcase"},[n("a-form",{attrs:{form:t.form,"label-col":{span:5},"wrapper-col":{span:12}},on:{submit:t.handleSubmit}},[n("a-form-item",{attrs:{label:"Note"}},[n("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),t._v(" "),n("a-form-item",{attrs:{label:"Gender"}},[n("a-select",{directives:[{name:"decorator",rawName:"v-decorator",value:["gender",{rules:[{required:!0,message:"Please select your gender!"}]}],expression:"[\n\t\t\t\t\t\t\t\t'gender',\n\t\t\t\t\t\t\t\t{ rules: [{ required: true, message: 'Please select your gender!' }] },\n\t\t\t\t\t\t\t\t]"}],attrs:{placeholder:"Select a option and change input text above"},on:{change:t.handleSelectChange}},[n("a-select-option",{attrs:{value:"male"}},[t._v("\n\t\t\t\t\t\t\t\tmale\n\t\t\t\t\t\t\t\t")]),t._v(" "),n("a-select-option",{attrs:{value:"female"}},[t._v("\n\t\t\t\t\t\t\t\tfemale\n\t\t\t\t\t\t\t\t")])],1)],1),t._v(" "),n("a-form-item",{attrs:{"wrapper-col":{span:12,offset:5}}},[n("a-button",{attrs:{type:"primary","html-type":"submit"}},[t._v("\n\t\t\t\t\t\t\t\tSubmit\n\t\t\t\t\t\t\t")])],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.codeSample}})],1),t._v(" "),n("section",{staticClass:"mb-24",attrs:{id:"Dynamic-Rules"}},[n("a-divider",{attrs:{orientation:"left"}},[t._v("Dynamic Rules")]),t._v(" "),n("p",[t._v("\n\t\t\t\t\t\tPerform different check rules according to different situations.\n\t\t\t\t\t")]),t._v(" "),n("div",{staticClass:"showcase"},[n("a-form",{attrs:{form:t.dynamicRulesForm}},[n("a-form-item",{attrs:{"label-col":t.formItemLayout.labelCol,"wrapper-col":t.formItemLayout.wrapperCol,label:"Name"}},[n("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["username",{rules:[{required:!0,message:"Please input your name"}]}],expression:"[\n\t\t\t\t\t\t\t\t'username',\n\t\t\t\t\t\t\t\t{ rules: [{ required: true, message: 'Please input your name' }] },\n\t\t\t\t\t\t\t\t]"}],attrs:{placeholder:"Please input your name"}})],1),t._v(" "),n("a-form-item",{attrs:{"label-col":t.formItemLayout.labelCol,"wrapper-col":t.formItemLayout.wrapperCol,label:"Nickname"}},[n("a-input",{directives:[{name:"decorator",rawName:"v-decorator",value:["nickname",{rules:[{required:t.checkNick,message:"Please input your nickname"}]}],expression:"[\n\t\t\t\t\t\t\t\t'nickname',\n\t\t\t\t\t\t\t\t{ rules: [{ required: checkNick, message: 'Please input your nickname' }] },\n\t\t\t\t\t\t\t\t]"}],attrs:{placeholder:"Please input your nickname"}})],1),t._v(" "),n("a-form-item",{attrs:{"label-col":t.formTailLayout.labelCol,"wrapper-col":t.formTailLayout.wrapperCol}},[n("a-checkbox",{attrs:{checked:t.checkNick},on:{change:t.handleChange}},[t._v("\n\t\t\t\t\t\t\t\tNickname is required\n\t\t\t\t\t\t\t")])],1),t._v(" "),n("a-form-item",{attrs:{"label-col":t.formTailLayout.labelCol,"wrapper-col":t.formTailLayout.wrapperCol}},[n("a-button",{attrs:{type:"primary"},on:{click:t.check}},[t._v("\n\t\t\t\t\t\t\t\tCheck\n\t\t\t\t\t\t\t")])],1)],1)],1),t._v(" "),n("muse-snippet",{attrs:{code:t.codeSample}})],1),t._v(" "),t._m(3)],1),t._v(" "),n("muse-anchor",{attrs:{anchors:t.anchors}})],1)])}),[function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24"},[n("h1",[t._v("Form")]),t._v(" "),n("p",{staticClass:"text-dark"},[t._v("\n\t\t\t\t\t\tForm is used to collect, validate, and submit the user input, usually\n\t\t\t\t\t\tcontains various form items including checkbox, radio, input, select,\n\t\t\t\t\t\tand etc.\n\t\t\t\t\t")]),t._v(" "),n("p",{staticClass:"text-dark"},[n("strong",[t._v("If you need to use "),n("code",[t._v("v-model")]),t._v(" verification, you can use new form "),n("code",[t._v("a-form-model")])])])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("section",{staticClass:"mb-24",attrs:{id:"When-To-Use"}},[n("h2",[t._v("When To Use")]),t._v(" "),n("ul",[n("li",[t._v("When you need to create a instance or collect information.")]),t._v(" "),n("li",[t._v("When you need to validate fields in certain rules.")])])])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",[t._v("\n\t\t\t\t\t\tUse "),n("code",[t._v("setFieldsValue")]),t._v(" to set other control’s value programmaticly.\n\t\t\t\t\t")])},function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("p",{staticClass:"text-right font-semibold mb-24"},[t._v("\n\t\t\t\t\tLooking for more Ant Design Vue Form? Please check the\n\t\t\t\t\t"),n("a",{attrs:{target:"_blank",href:"https://antdv.com/components/form/"}},[t._v("official docs")]),t._v(".\n\t\t\t\t")])}],!1,null,"3978e536",null);e.default=component.exports;installComponents(component,{MuseSnippet:n(1180).default,MuseAnchor:n(1179).default})}}]);