Form 表单

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

表单

我们为 form 提供了以下三种排列方式：

  • 水平排列：标签和表单控件水平排列；（默认）
  • 垂直排列：标签和表单控件上下垂直排列；
  • 行内排列：表单项水平行内排列。

表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里我们封装了表单域 <Form.Item /> 。

注意：

1、如果使用 Form.create 处理表单使其具有自动收集数据并校验的功能，建议使用jsx。2、如果不是使用Vue.use(Form)形式注册的Form组件，你需要自行将$form挂载到Vue原型上。Vue.prototype.$form = Form

代码演示

Form表单 - 图1

表单联动

使用 setFieldsValue 来动态设置其他控件的值。

  1. <template>
  2.   <a-form
  3.     :form="form"
  4.     @submit="handleSubmit"
  5.   >
  6.     <a-form-item
  7.       label="Note"
  8.       :label-col="{ span: 5 }"
  9.       :wrapper-col="{ span: 12 }"
  10.     >
  11.       <a-input
  12.         v-decorator="[
  13.           'note',
  14.           {rules: [{ required: true, message: 'Please input your note!' }]}
  15.         ]"
  16.       />
  17.     </a-form-item>
  18.     <a-form-item
  19.       label="Gender"
  20.       :label-col="{ span: 5 }"
  21.       :wrapper-col="{ span: 12 }"
  22.     >
  23.       <a-select
  24.         v-decorator="[
  25.           'gender',
  26.           {rules: [{ required: true, message: 'Please select your gender!' }]}
  27.         ]"
  28.         placeholder="Select a option and change input text above"
  29.         @change="handleSelectChange"
  30.       >
  31.         <a-select-option value="male">
  32.           male
  33.         </a-select-option>
  34.         <a-select-option value="female">
  35.           female
  36.         </a-select-option>
  37.       </a-select>
  38.     </a-form-item>
  39.     <a-form-item
  40.       :wrapper-col="{ span: 12, offset: 5 }"
  41.     >
  42.       <a-button
  43.         type="primary"
  44.         html-type="submit"
  45.       >
  46.         Submit
  47.       </a-button>
  48.     </a-form-item>
  49.   </a-form>
  50. </template>
  52. <script>
  53. export default {
  54.   data () {
  55.     return {
  56.       formLayout: 'horizontal',
  57.       form: this.$form.createForm(this),
  58.     };
  59.   },
  60.   methods: {
  61.     handleSubmit (e) {
  62.       e.preventDefault();
  63.       this.form.validateFields((err, values) => {
  64.         if (!err) {
  65.           console.log('Received values of form: ', values);
  66.         }
  67.       });
  68.     },
  69.     handleSelectChange (value) {
  70.       console.log(value);
  71.       this.form.setFieldsValue({
  72.         note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
  73.       });
  74.     },
  75.   },
  76. };
  77. </script>

Form表单 - 图2

动态校验规则

根据不同情况执行不同的校验规则。

  1. <template>
  2.   <a-form :form="form">
  3.     <a-form-item
  4.       :label-col="formItemLayout.labelCol"
  5.       :wrapper-col="formItemLayout.wrapperCol"
  6.       label="Name"
  7.     >
  8.       <a-input
  9.         v-decorator="[
  10.           'username',
  11.           {rules: [{ required: true, message: 'Please input your name' }]}
  12.         ]"
  13.         placeholder="Please input your name"
  14.       />
  15.     </a-form-item>
  16.     <a-form-item
  17.       :label-col="formItemLayout.labelCol"
  18.       :wrapper-col="formItemLayout.wrapperCol"
  19.       label="Nickname"
  20.     >
  21.       <a-input
  22.         v-decorator="[
  23.           'nickname',
  24.           {rules: [{ required: checkNick, message: 'Please input your nickname' }]}
  25.         ]"
  26.         placeholder="Please input your nickname"
  27.       />
  28.     </a-form-item>
  29.     <a-form-item
  30.       :label-col="formTailLayout.labelCol"
  31.       :wrapper-col="formTailLayout.wrapperCol"
  32.     >
  33.       <a-checkbox
  34.         :checked="checkNick"
  35.         @change="handleChange"
  36.       >
  37.         Nickname is required
  38.       </a-checkbox>
  39.     </a-form-item>
  40.     <a-form-item
  41.       :label-col="formTailLayout.labelCol"
  42.       :wrapper-col="formTailLayout.wrapperCol"
  43.     >
  44.       <a-button
  45.         type="primary"
  46.         @click="check"
  47.       >
  48.         Check
  49.       </a-button>
  50.     </a-form-item>
  51.   </a-form>
  52. </template>
  54. <script>
  55. const formItemLayout = {
  56.   labelCol: { span: 4 },
  57.   wrapperCol: { span: 8 },
  58. };
  59. const formTailLayout = {
  60.   labelCol: { span: 4 },
  61.   wrapperCol: { span: 8, offset: 4 },
  62. };
  63. export default {
  64.   data () {
  65.     return {
  66.       checkNick: false,
  67.       formItemLayout,
  68.       formTailLayout,
  69.       form: this.$form.createForm(this),
  70.     };
  71.   },
  72.   methods: {
  73.     check  () {
  74.       this.form.validateFields(
  75.         (err) => {
  76.           if (!err) {
  77.             console.info('success');
  78.           }
  79.         },
  80.       );
  81.     },
  82.     handleChange  (e) {
  83.       this.checkNick = e.target.checked;
  84.       this.$nextTick(() => {
  85.         this.form.validateFields(['nickname'], { force: true });
  86.       });
  87.     },
  88.   },
  89. };
  90. </script>

Form表单 - 图3

水平登录栏

水平登录栏，常用在顶部导航栏中。

  1. <template>
  2.   <a-form
  3.     layout="inline"
  4.     :form="form"
  5.     @submit="handleSubmit"
  6.   >
  7.     <a-form-item
  8.       :validate-status="userNameError() ? 'error' : ''"
  9.       :help="userNameError() || ''"
  10.     >
  11.       <a-input
  12.         v-decorator="[
  13.           'userName',
  14.           {rules: [{ required: true, message: 'Please input your username!' }]}
  15.         ]"
  16.         placeholder="Username"
  17.       >
  18.         <a-icon
  19.           slot="prefix"
  20.           type="user"
  21.           style="color:rgba(0,0,0,.25)"
  22.         />
  23.       </a-input>
  24.     </a-form-item>
  25.     <a-form-item
  26.       :validate-status="passwordError() ? 'error' : ''"
  27.       :help="passwordError() || ''"
  28.     >
  29.       <a-input
  30.         v-decorator="[
  31.           'password',
  32.           {rules: [{ required: true, message: 'Please input your Password!' }]}
  33.         ]"
  34.         type="password"
  35.         placeholder="Password"
  36.       >
  37.         <a-icon
  38.           slot="prefix"
  39.           type="lock"
  40.           style="color:rgba(0,0,0,.25)"
  41.         />
  42.       </a-input>
  43.     </a-form-item>
  44.     <a-form-item>
  45.       <a-button
  46.         type="primary"
  47.         html-type="submit"
  48.         :disabled="hasErrors(form.getFieldsError())"
  49.       >
  50.         Log in
  51.       </a-button>
  52.     </a-form-item>
  53.   </a-form>
  54. </template>
  56. <script>
  57. function hasErrors (fieldsError) {
  58.   return Object.keys(fieldsError).some(field => fieldsError[field]);
  59. }
  60. export default {
  61.   data () {
  62.     return {
  63.       hasErrors,
  64.       form: this.$form.createForm(this),
  65.     };
  66.   },
  67.   mounted () {
  68.     this.$nextTick(() => {
  69.       // To disabled submit button at the beginning.
  70.       this.form.validateFields();
  71.     });
  72.   },
  73.   methods: {
  74.     // Only show error after a field is touched.
  75.     userNameError () {
  76.       const { getFieldError, isFieldTouched } = this.form;
  77.       return isFieldTouched('userName') && getFieldError('userName');
  78.     },
  79.     // Only show error after a field is touched.
  80.     passwordError () {
  81.       const { getFieldError, isFieldTouched } = this.form;
  82.       return isFieldTouched('password') && getFieldError('password');
  83.     },
  84.     handleSubmit  (e) {
  85.       e.preventDefault();
  86.       this.form.validateFields((err, values) => {
  87.         if (!err) {
  88.           console.log('Received values of form: ', values);
  89.         }
  90.       });
  91.     },
  92.   },
  93. };
  94. </script>

Form表单 - 图4

表单布局

表单有三种布局。

  1. <template>
  2.   <div>
  3.     <a-form :layout="formLayout">
  4.       <a-form-item
  5.         label="Form Layout"
  6.         :label-col="formItemLayout.labelCol"
  7.         :wrapper-col="formItemLayout.wrapperCol"
  8.       >
  9.         <a-radio-group
  10.           default-value="horizontal"
  11.           @change="handleFormLayoutChange"
  12.         >
  13.           <a-radio-button value="horizontal">
  14.             Horizontal
  15.           </a-radio-button>
  16.           <a-radio-button value="vertical">
  17.             Vertical
  18.           </a-radio-button>
  19.           <a-radio-button value="inline">
  20.             Inline
  21.           </a-radio-button>
  22.         </a-radio-group>
  23.       </a-form-item>
  24.       <a-form-item
  25.         label="Field A"
  26.         :label-col="formItemLayout.labelCol"
  27.         :wrapper-col="formItemLayout.wrapperCol"
  28.       >
  29.         <a-input placeholder="input placeholder" />
  30.       </a-form-item>
  31.       <a-form-item
  32.         label="Field B"
  33.         :label-col="formItemLayout.labelCol"
  34.         :wrapper-col="formItemLayout.wrapperCol"
  35.       >
  36.         <a-input placeholder="input placeholder" />
  37.       </a-form-item>
  38.       <a-form-item
  39.         :wrapper-col="buttonItemLayout.wrapperCol"
  40.       >
  41.         <a-button type="primary">
  42.           Submit
  43.         </a-button>
  44.       </a-form-item>
  45.     </a-form>
  46.   </div>
  47. </template>
  49. <script>
  50. export default {
  51.   data () {
  52.     return {
  53.       formLayout: 'horizontal',
  54.     };
  55.   },
  56.   computed: {
  57.     formItemLayout () {
  58.       const { formLayout } = this;
  59.       return formLayout === 'horizontal' ? {
  60.         labelCol: { span: 4 },
  61.         wrapperCol: { span: 14 },
  62.       } : {};
  63.     },
  64.     buttonItemLayout () {
  65.       const { formLayout } = this;
  66.       return formLayout === 'horizontal' ? {
  67.         wrapperCol: { span: 14, offset: 4 },
  68.       } : {};
  69.     },
  70.   },
  71.   methods: {
  72.     handleFormLayoutChange  (e) {
  73.       this.formLayout = e.target.value;
  74.     },
  75.   },
  76. };
  77. </script>

Form表单 - 图5

自定义校验

我们提供了 validateStatus help hasFeedback 等属性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。

  • validateStatus: 校验状态，可选 ‘success’, ‘warning’, ‘error’, ‘validating’。
  • hasFeedback：用于给输入框添加反馈图标。
  • help：设置校验文案。
  1. <template>
  2.   <a-form>
  3.     <a-form-item
  4.       :label-col="labelCol"
  5.       :wrapper-col="wrapperCol"
  6.       label="Fail"
  7.       validate-status="error"
  8.       help="Should be combination of numbers & alphabets"
  9.     >
  10.       <a-input
  11.         id="error"
  12.         placeholder="unavailable choice"
  13.       />
  14.     </a-form-item>
  16.     <a-form-item
  17.       :label-col="labelCol"
  18.       :wrapper-col="wrapperCol"
  19.       label="Warning"
  20.       validate-status="warning"
  21.     >
  22.       <a-input
  23.         id="warning"
  24.         placeholder="Warning"
  25.       />
  26.     </a-form-item>
  28.     <a-form-item
  29.       :label-col="labelCol"
  30.       :wrapper-col="wrapperCol"
  31.       label="Validating"
  32.       has-feedback
  33.       validate-status="validating"
  34.       help="The information is being validated..."
  35.     >
  36.       <a-input
  37.         id="validating"
  38.         placeholder="I'm the content is being validated"
  39.       />
  40.     </a-form-item>
  42.     <a-form-item
  43.       :label-col="labelCol"
  44.       :wrapper-col="wrapperCol"
  45.       label="Success"
  46.       has-feedback
  47.       validate-status="success"
  48.     >
  49.       <a-input
  50.         id="success"
  51.         placeholder="I'm the content"
  52.       />
  53.     </a-form-item>
  55.     <a-form-item
  56.       :label-col="labelCol"
  57.       :wrapper-col="wrapperCol"
  58.       label="Warning"
  59.       has-feedback
  60.       validate-status="warning"
  61.     >
  62.       <a-input
  63.         id="warning"
  64.         placeholder="Warning"
  65.       />
  66.     </a-form-item>
  68.     <a-form-item
  69.       :label-col="labelCol"
  70.       :wrapper-col="wrapperCol"
  71.       label="Fail"
  72.       has-feedback
  73.       validate-status="error"
  74.       help="Should be combination of numbers & alphabets"
  75.     >
  76.       <a-input
  77.         id="error"
  78.         placeholder="unavailable choice"
  79.       />
  80.     </a-form-item>
  82.     <a-form-item
  83.       :label-col="labelCol"
  84.       :wrapper-col="wrapperCol"
  85.       label="Success"
  86.       has-feedback
  87.       validate-status="success"
  88.     >
  89.       <a-date-picker style="width: 100%" />
  90.     </a-form-item>
  92.     <a-form-item
  93.       :label-col="labelCol"
  94.       :wrapper-col="wrapperCol"
  95.       label="Warning"
  96.       has-feedback
  97.       validate-status="warning"
  98.     >
  99.       <a-time-picker style="width: 100%" />
  100.     </a-form-item>
  102.     <a-form-item
  103.       :label-col="labelCol"
  104.       :wrapper-col="wrapperCol"
  105.       label="Error"
  106.       has-feedback
  107.       validate-status="error"
  108.     >
  109.       <a-select default-value="1">
  110.         <a-select-option value="1">
  111.           Option 1
  112.         </a-select-option>
  113.         <a-select-option value="2">
  114.           Option 2
  115.         </a-select-option>
  116.         <a-select-option value="3">
  117.           Option 3
  118.         </a-select-option>
  119.       </a-select>
  120.     </a-form-item>
  122.     <a-form-item
  123.       :label-col="labelCol"
  124.       :wrapper-col="wrapperCol"
  125.       label="Validating"
  126.       has-feedback
  127.       validate-status="validating"
  128.       help="The information is being validated..."
  129.     >
  130.       <a-cascader
  131.         :default-value="['1']"
  132.         :options="[]"
  133.       />
  134.     </a-form-item>
  136.     <a-form-item
  137.       label="inline"
  138.       :label-col="labelCol"
  139.       :wrapper-col="wrapperCol"
  140.       style="margin-bottom:0;"
  141.     >
  142.       <a-form-item
  143.         validate-status="error"
  144.         help="Please select the correct date"
  145.         :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
  146.       >
  147.         <a-date-picker style="width: 100%" />
  148.       </a-form-item>
  149.       <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">
  150.         -
  151.       </span>
  152.       <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
  153.         <a-date-picker style="width: 100%" />
  154.       </a-form-item>
  155.     </a-form-item>
  157.     <a-form-item
  158.       :label-col="labelCol"
  159.       :wrapper-col="wrapperCol"
  160.       label="Success"
  161.       has-feedback
  162.       validate-status="success"
  163.     >
  164.       <a-input-number style="width: 100%" />
  165.     </a-form-item>
  166.   </a-form>
  167. </template>
  168. <script>
  169. export default {
  170.   data () {
  171.     return {
  172.       labelCol: {
  173.         xs: { span: 24 },
  174.         sm: { span: 5 },
  175.       },
  176.       wrapperCol: {
  177.         xs: { span: 24 },
  178.         sm: { span: 12 },
  179.       },
  180.     };
  181.   },
  182. };
  183. </script>

Form表单 - 图6

自行处理表单数据

使用 Form.create 处理后的表单具有自动收集数据并校验的功能，但如果您不需要这个功能，或者默认的行为无法满足业务需求，可以选择不使用 Form.create 并自行处理数据。

  1. <template>
  2.   <a-form>
  3.     <a-form-item
  4.       :label-col="labelCol"
  5.       :wrapper-col="wrapperCol"
  6.       label="Prime between 8 & 12"
  7.       :validate-status="number.validateStatus"
  8.       :help="number.errorMsg || tips"
  9.     >
  10.       <a-input-number
  11.         :min="8"
  12.         :max="12"
  13.         :value="number.value"
  14.         @change="handleNumberChange"
  15.       />
  16.     </a-form-item>
  17.   </a-form>
  18. </template>
  19. <script>
  20. function validatePrimeNumber (number) {
  21.   if (number === 11) {
  22.     return {
  23.       validateStatus: 'success',
  24.       errorMsg: null,
  25.     };
  26.   }
  27.   return {
  28.     validateStatus: 'error',
  29.     errorMsg: 'The prime between 8 and 12 is 11!',
  30.   };
  31. }
  32. export default {
  33.   data () {
  34.     return {
  35.       labelCol: { span: 7 },
  36.       wrapperCol: { span: 12 },
  37.       number: {
  38.         value: 11,
  39.       },
  40.       tips: 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
  41.     };
  42.   },
  43.   methods: {
  44.     handleNumberChange (value) {
  45.       this.number = {
  46.         ...validatePrimeNumber(value),
  47.         value,
  48.       };
  49.     },
  50.   },
  51. };
  52. </script>

Form表单 - 图7

高级搜索

三列栅格式的表单排列方式，常用于数据表格的高级搜索。有部分定制的样式代码，由于输入标签长度不确定，需要根据具体情况自行调整。

  1. <template>
  2.   <div id="components-form-demo-advanced-search">
  3.     <a-form
  4.       class="ant-advanced-search-form"
  5.       :form="form"
  6.       @submit="handleSearch"
  7.     >
  8.       <a-row :gutter="24">
  9.         <a-col
  10.           v-for="i in 10"
  11.           :key="i"
  12.           :span="8"
  13.           :style="{ display: i < count ? 'block' : 'none' }"
  14.         >
  15.           <a-form-item :label="`Field ${i}`">
  16.             <a-input
  17.               v-decorator="[
  18.                 `field-${i}`,
  19.                 {
  20.                   rules: [{
  21.                     required: true,
  22.                     message: 'Input something!',
  23.                   }],
  24.                 }
  25.               ]"
  26.               placeholder="placeholder"
  27.             />
  28.           </a-form-item>
  29.         </a-col>
  30.       </a-row>
  31.       <a-row>
  32.         <a-col
  33.           :span="24"
  34.           :style="{ textAlign: 'right' }"
  35.         >
  36.           <a-button
  37.             type="primary"
  38.             html-type="submit"
  39.           >
  40.             Search
  41.           </a-button>
  42.           <a-button
  43.             :style="{ marginLeft: '8px' }"
  44.             @click="handleReset"
  45.           >
  46.             Clear
  47.           </a-button>
  48.           <a
  49.             :style="{ marginLeft: '8px', fontSize: '12px' }"
  50.             @click="toggle"
  51.           >
  52.             Collapse <a-icon :type="expand ? 'up' : 'down'" />
  53.           </a>
  54.         </a-col>
  55.       </a-row>
  56.     </a-form>
  57.     <div class="search-result-list">
  58.       Search Result List
  59.     </div>
  60.   </div>
  61. </template>
  62. <script>
  64. export default {
  65.   data () {
  66.     return {
  67.       expand: false,
  68.       form: this.$form.createForm(this),
  69.     };
  70.   },
  71.   computed: {
  72.     count () {
  73.       return this.expand ? 11 : 7;
  74.     },
  75.   },
  76.   methods: {
  77.     handleSearch  (e) {
  78.       e.preventDefault();
  79.       this.form.validateFields((error, values) => {
  80.         console.log('error', error);
  81.         console.log('Received values of form: ', values);
  82.       });
  83.     },
  85.     handleReset () {
  86.       this.form.resetFields();
  87.     },
  89.     toggle  () {
  90.       this.expand = !this.expand;
  91.     },
  92.   },
  93. };
  94. </script>
  95. <style>
  96. .ant-advanced-search-form {
  97.   padding: 24px;
  98.   background: #fbfbfb;
  99.   border: 1px solid #d9d9d9;
  100.   border-radius: 6px;
  101. }
  103. .ant-advanced-search-form .ant-form-item {
  104.   display: flex;
  105. }
  107. .ant-advanced-search-form .ant-form-item-control-wrapper {
  108.   flex: 1;
  109. }
  111. #components-form-demo-advanced-search .ant-form {
  112.   max-width: none;
  113. }
  114. #components-form-demo-advanced-search .search-result-list {
  115.   margin-top: 16px;
  116.   border: 1px dashed #e9e9e9;
  117.   border-radius: 6px;
  118.   background-color: #fafafa;
  119.   min-height: 200px;
  120.   text-align: center;
  121.   padding-top: 80px;
  122. }
  123. </style>

Form表单 - 图8

自定义表单控件

自定义或第三方的表单控件，也可以与 Form 组件一起使用。只要该组件遵循以下的约定：

  • 提供受控属性 value 或其它与 valuePropName-参数) 的值同名的属性。
  • 提供 onChange 事件或 trigger-参数) 的值同名的事件。
  • 不能是函数式组件。
  1. <template>
  2.   <a-form
  3.     layout="inline"
  4.     :form="form"
  5.     @submit="handleSubmit"
  6.   >
  7.     <a-form-item label="Price">
  8.       <price-input
  9.         v-decorator="[
  10.           'price',
  11.           {
  12.             initialValue: { number: 0, currency: 'rmb' },
  13.             rules: [{ validator: checkPrice }],
  14.           }
  15.         ]"
  16.       />
  17.     </a-form-item>
  18.     <a-form-item>
  19.       <a-button
  20.         type="primary"
  21.         html-type="submit"
  22.       >
  23.         Submit
  24.       </a-button>
  25.     </a-form-item>
  26.   </a-form>
  27. </template>
  29. <script>
  30. const hasProp = (instance, prop) => {
  31.   const $options = instance.$options || {};
  32.   const propsData = $options.propsData || {};
  33.   return prop in propsData;
  34. };
  35. const PriceInput = {
  36.   props: ['value'],
  37.   template: `
  38.     <span>
  39.       <a-input
  40.         type='text'
  41.         :value="number"
  42.         @change="handleNumberChange"
  43.         style="width: 63%; margin-right: 2%;"
  44.       />
  45.       <a-select
  46.         :value="currency"
  47.         style="width: 32%"
  48.         @change="handleCurrencyChange"
  49.       >
  50.         <a-select-option value='rmb'>RMB</a-select-option>
  51.         <a-select-option value='dollar'>Dollar</a-select-option>
  52.       </a-select>
  53.     </span>
  54.   `,
  55.   data () {
  56.     const value = this.value || {};
  57.     return {
  58.       number: value.number || 0,
  59.       currency: value.currency || 'rmb',
  60.     };
  61.   },
  62.   watch: {
  63.     value (val = {}) {
  64.       this.number = val.number || 0;
  65.       this.currency = val.currency || 'rmb';
  66.     },
  67.   },
  68.   methods: {
  69.     handleNumberChange  (e) {
  70.       const number = parseInt(e.target.value || 0, 10);
  71.       if (isNaN(number)) {
  72.         return;
  73.       }
  74.       if (!hasProp(this, 'value')) {
  75.         this.number = number;
  76.       }
  77.       this.triggerChange({ number });
  78.     },
  79.     handleCurrencyChange (currency) {
  80.       if (!hasProp(this, 'value')) {
  81.         this.currency = currency;
  82.       }
  83.       this.triggerChange({ currency });
  84.     },
  85.     triggerChange  (changedValue) {
  86.       // Should provide an event to pass value to Form.
  87.       this.$emit('change', Object.assign({}, this.$data, changedValue));
  88.     },
  89.   },
  90. };
  92. export default {
  93.   components: {
  94.     PriceInput,
  95.   },
  96.   beforeCreate () {
  97.     this.form = this.$form.createForm(this);
  98.   },
  99.   methods: {
  100.     handleSubmit  (e) {
  101.       e.preventDefault();
  102.       this.form.validateFields((err, values) => {
  103.         if (!err) {
  104.           console.log('Received values of form: ', values);
  105.         }
  106.       });
  107.     },
  108.     checkPrice  (rule, value, callback) {
  109.       if (value.number > 0) {
  110.         callback();
  111.         return;
  112.       }
  113.       callback('Price must greater than zero!');
  114.     },
  115.   },
  116. };
  118. </script>

Form表单 - 图9

动态增减表单项

动态增加、减少表单项。

  1. <template>
  2.   <a-form
  3.     :form="form"
  4.     @submit="handleSubmit"
  5.   >
  6.     <a-form-item
  7.       v-for="(k, index) in form.getFieldValue('keys')"
  8.       :key="k"
  9.       v-bind="index === 0 ? formItemLayout : formItemLayoutWithOutLabel"
  10.       :label="index === 0 ? 'Passengers' : ''"
  11.       :required="false"
  12.     >
  13.       <a-input
  14.         v-decorator="[
  15.           `names[${k}]`,
  16.           {
  17.             validateTrigger: ['change', 'blur'],
  18.             preserve: true,
  19.             rules: [{
  20.               required: true,
  21.               whitespace: true,
  22.               message: 'Please input passenger\'s name or delete this field.',
  23.             }],
  24.           }
  25.         ]"
  26.         placeholder="passenger name"
  27.         style="width: 60%; margin-right: 8px"
  28.       />
  29.       <a-icon
  30.         v-if="form.getFieldValue('keys').length > 1"
  31.         class="dynamic-delete-button"
  32.         type="minus-circle-o"
  33.         :disabled="form.getFieldValue('keys').length === 1"
  34.         @click="() => remove(k)"
  35.       />
  36.     </a-form-item>
  37.     <a-form-item v-bind="formItemLayoutWithOutLabel">
  38.       <a-button
  39.         type="dashed"
  40.         style="width: 60%"
  41.         @click="add"
  42.       >
  43.         <a-icon type="plus" /> Add field
  44.       </a-button>
  45.     </a-form-item>
  46.     <a-form-item v-bind="formItemLayoutWithOutLabel">
  47.       <a-button
  48.         type="primary"
  49.         html-type="submit"
  50.       >
  51.         Submit
  52.       </a-button>
  53.     </a-form-item>
  54.   </a-form>
  55. </template>
  57. <script>
  58. let id = 0;
  59. export default {
  60.   data () {
  61.     return {
  62.       formItemLayout: {
  63.         labelCol: {
  64.           xs: { span: 24 },
  65.           sm: { span: 4 },
  66.         },
  67.         wrapperCol: {
  68.           xs: { span: 24 },
  69.           sm: { span: 20 },
  70.         },
  71.       },
  72.       formItemLayoutWithOutLabel: {
  73.         wrapperCol: {
  74.           xs: { span: 24, offset: 0 },
  75.           sm: { span: 20, offset: 4 },
  76.         },
  77.       },
  78.     };
  79.   },
  80.   beforeCreate () {
  81.     this.form = this.$form.createForm(this);
  82.     this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  83.   },
  84.   methods: {
  85.     remove  (k) {
  86.       const { form } = this;
  87.       // can use data-binding to get
  88.       const keys = form.getFieldValue('keys');
  89.       // We need at least one passenger
  90.       if (keys.length === 1) {
  91.         return;
  92.       }
  94.       // can use data-binding to set
  95.       form.setFieldsValue({
  96.         keys: keys.filter(key => key !== k),
  97.       });
  98.     },
  100.     add  () {
  101.       const { form } = this;
  102.       // can use data-binding to get
  103.       const keys = form.getFieldValue('keys');
  104.       const nextKeys = keys.concat(++id);
  105.       // can use data-binding to set
  106.       // important! notify form to detect changes
  107.       form.setFieldsValue({
  108.         keys: nextKeys,
  109.       });
  110.     },
  112.     handleSubmit  (e) {
  113.       e.preventDefault();
  114.       this.form.validateFields((err, values) => {
  115.         if (!err) {
  116.           console.log('Received values of form: ', values);
  117.         }
  118.       });
  119.     },
  120.   },
  121. };
  122. </script>
  123. <style>
  124. .dynamic-delete-button {
  125.   cursor: pointer;
  126.   position: relative;
  127.   top: 4px;
  128.   font-size: 24px;
  129.   color: #999;
  130.   transition: all .3s;
  131. }
  132. .dynamic-delete-button:hover {
  133.   color: #777;
  134. }
  135. .dynamic-delete-button[disabled] {
  136.   cursor: not-allowed;
  137.   opacity: 0.5;
  138. }
  139. </style>

Form表单 - 图10

弹出层中的新建表单

当用户访问一个展示了某个列表的页面，想新建一项但又不想跳转页面时，可以用 Modal 弹出一个表单，用户填写必要信息后创建新的项。

  1. <template>
  2.   <div>
  3.     <a-button
  4.       type="primary"
  5.       @click="showModal"
  6.     >
  7.       New Collection
  8.     </a-button>
  9.     <collection-create-form
  10.       ref="collectionForm"
  11.       :visible="visible"
  12.       @cancel="handleCancel"
  13.       @create="handleCreate"
  14.     />
  15.   </div>
  16. </template>
  18. <script>
  19. const CollectionCreateForm = {
  20.   props: ['visible'],
  21.   beforeCreate () {
  22.     this.form = this.$form.createForm(this);
  23.   },
  24.   template: `
  25.     <a-modal
  26.       :visible="visible"
  27.       title='Create a new collection'
  28.       okText='Create'
  29.       @cancel="() => { $emit('cancel') }"
  30.       @ok="() => { $emit('create') }"
  31.     >
  32.       <a-form layout='vertical' :form="form">
  33.         <a-form-item label='Title'>
  34.           <a-input
  35.             v-decorator="[
  36.               'title',
  37.               {
  38.                 rules: [{ required: true, message: 'Please input the title of collection!' }],
  39.               }
  40.             ]"
  41.           />
  42.         </a-form-item>
  43.         <a-form-item label='Description'>
  44.           <a-input
  45.             type='textarea'
  46.             v-decorator="['description']"
  47.           />
  48.         </a-form-item>
  49.         <a-form-item class='collection-create-form_last-form-item'>
  50.           <a-radio-group
  51.             v-decorator="[
  52.               'modifier',
  53.               {
  54.                 initialValue: 'private',
  55.               }
  56.             ]"
  57.           >
  58.               <a-radio value='public'>Public</a-radio>
  59.               <a-radio value='private'>Private</a-radio>
  60.             </a-radio-group>
  61.         </a-form-item>
  62.       </a-form>
  63.     </a-modal>
  64.   `,
  65. };
  67. export default {
  68.   components: { CollectionCreateForm },
  69.   data () {
  70.     return {
  71.       visible: false,
  72.     };
  73.   },
  74.   methods: {
  75.     showModal () {
  76.       this.visible = true;
  77.     },
  78.     handleCancel  () {
  79.       this.visible = false;
  80.     },
  81.     handleCreate  () {
  82.       const form = this.$refs.collectionForm.form;
  83.       form.validateFields((err, values) => {
  84.         if (err) {
  85.           return;
  86.         }
  87.         console.log('Received values of form: ', values);
  88.         form.resetFields();
  89.         this.visible = false;
  90.       });
  91.     },
  92.   },
  93. };
  94. </script>

Form表单 - 图11

表单数据存储于上层组件

通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到上层组件。注意：mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。如果你使用Form.create，上层组件传递的属性，必须在Form.create({ props: …})的props中声明。如果使用this.$form.createForm，你可以使用任何数据，不仅仅局限于上层组件的属性。

  1. <template>
  2.   <div id="components-form-demo-global-state">
  3.     <customized-form
  4.       :username="fields.username"
  5.       @change="handleFormChange"
  6.     />
  7.     <pre class="language-bash">
  8.       {{ JSON.stringify(fields, null, 2) }}
  9.     </pre>
  10.   </div>
  11. </template>
  13. <script>
  14. const CustomizedForm = {
  15.   props: ['username'],
  16.   template: `
  17.     <a-form layout='inline' :form="form">
  18.       <a-form-item label='Username'>
  19.         <a-input
  20.           v-decorator="[
  21.             'username',
  22.             {
  23.               rules: [{ required: true, message: 'Username is required!' }],
  24.             }
  25.           ]"
  26.         />
  27.       </a-form-item>
  28.     </a-form>
  29.   `,
  30.   created () {
  31.     this.form = this.$form.createForm(this, {
  32.       onFieldsChange: (_, changedFields) => {
  33.         this.$emit('change', changedFields);
  34.       },
  35.       mapPropsToFields: () => {
  36.         return {
  37.           username: this.$form.createFormField({
  38.             ...this.username,
  39.             value: this.username.value,
  40.           }),
  41.         };
  42.       },
  43.       onValuesChange (_, values) {
  44.         console.log(values);
  45.       },
  46.     });
  47.   },
  48.   watch: {
  49.     username () {
  50.       this.form.updateFields({
  51.         username: this.$form.createFormField({
  52.           ...this.username,
  53.           value: this.username.value,
  54.         }),
  55.       });
  56.     },
  57.   },
  58. };
  60. export default {
  61.   components: {
  62.     CustomizedForm,
  63.   },
  64.   data () {
  65.     return {
  66.       fields: {
  67.         username: {
  68.           value: 'benjycui',
  69.         },
  70.       },
  71.     };
  72.   },
  73.   methods: {
  74.     handleFormChange (changedFields) {
  75.       console.log('changedFields', changedFields);
  76.       this.fields = { ...this.fields, ...changedFields };
  77.     },
  78.   },
  79. };
  80. </script>
  81. <style>
  82. #components-form-demo-global-state .language-bash {
  83.   max-width: 400px;
  84.   border-radius: 6px;
  85.   margin-top: 24px;
  86. }
  87. </style>

Form表单 - 图12

表单数据存储于 Vuex Store 中

通过使用 onFieldsChange 与 mapPropsToFields，可以把表单的数据存储到 Vuex 中。注意：mapPropsToFields 里面返回的表单域数据必须使用 Form.createFormField 包装。

  1. <template>
  2.   <div id="components-form-demo-vuex">
  3.     <a-form
  4.       :form="form"
  5.       @submit="handleSubmit"
  6.     >
  7.       <a-form-item label="Username">
  8.         <a-input
  9.           v-decorator="[
  10.             'username',
  11.             {
  12.               rules: [{ required: true, message: 'Username is required!' }],
  13.             }
  14.           ]"
  15.         />
  16.       </a-form-item>
  17.       <a-button
  18.         type="primary"
  19.         html-type="submit"
  20.       >
  21.         Submit
  22.       </a-button>
  23.     </a-form>
  24.   </div>
  25. </template>
  27. <script>
  28. export default  {
  29.   computed: {
  30.     username () {
  31.       return this.$store.state.username;
  32.     },
  33.   },
  34.   watch: {
  35.     username (val) {
  36.       console.log('this.$store.state.username: ', val);
  37.       this.form.setFieldsValue({username: val});
  38.     },
  39.   },
  40.   created () {
  41.     this.form = this.$form.createForm(this, {
  42.       onFieldsChange: (_, changedFields) => {
  43.         this.$emit('change', changedFields);
  44.       },
  45.       mapPropsToFields: () => {
  46.         return {
  47.           username: this.$form.createFormField({
  48.             value: this.username,
  49.           }),
  50.         };
  51.       },
  52.       onValuesChange: (_, values) =>{
  53.         console.log(values);
  54.         // Synchronize to vuex store in real time 
  55.         // this.$store.commit('update', values)
  56.       },
  57.     });
  58.   },
  59.   methods: {
  60.     handleSubmit (e) {
  61.       e.preventDefault();
  62.       this.form.validateFields((err, values) => {
  63.         if (!err) {
  64.           console.log('Received values of form: ', values);
  65.           this.$store.commit('update', values);
  66.         }
  67.       });
  68.     },
  69.   },
  70. };
  71. </script>
  72. <style>
  73. #components-form-demo-vuex .language-bash {
  74.   max-width: 400px;
  75.   border-radius: 6px;
  76.   margin-top: 24px;
  77. }
  78. </style>

Form表单 - 图13

登录框

普通的登录框，可以容纳更多的元素。

  1. <template>
  2.   <a-form
  3.     id="components-form-demo-normal-login"
  4.     :form="form"
  5.     class="login-form"
  6.     @submit="handleSubmit"
  7.   >
  8.     <a-form-item>
  9.       <a-input
  10.         v-decorator="[
  11.           'userName',
  12.           { rules: [{ required: true, message: 'Please input your username!' }] }
  13.         ]"
  14.         placeholder="Username"
  15.       >
  16.         <a-icon
  17.           slot="prefix"
  18.           type="user"
  19.           style="color: rgba(0,0,0,.25)"
  20.         />
  21.       </a-input>
  22.     </a-form-item>
  23.     <a-form-item>
  24.       <a-input
  25.         v-decorator="[
  26.           'password',
  27.           { rules: [{ required: true, message: 'Please input your Password!' }] }
  28.         ]"
  29.         type="password"
  30.         placeholder="Password"
  31.       >
  32.         <a-icon
  33.           slot="prefix"
  34.           type="lock"
  35.           style="color: rgba(0,0,0,.25)"
  36.         />
  37.       </a-input>
  38.     </a-form-item>
  39.     <a-form-item>
  40.       <a-checkbox
  41.         v-decorator="[
  42.           'remember',
  43.           {
  44.             valuePropName: 'checked',
  45.             initialValue: true,
  46.           }
  47.         ]"
  48.       >
  49.         Remember me
  50.       </a-checkbox>
  51.       <a
  52.         class="login-form-forgot"
  53.         href=""
  54.       >
  55.         Forgot password
  56.       </a>
  57.       <a-button
  58.         type="primary"
  59.         html-type="submit"
  60.         class="login-form-button"
  61.       >
  62.         Log in
  63.       </a-button>
  64.       Or <a href="">
  65.         register now!
  66.       </a>
  67.     </a-form-item>
  68.   </a-form>
  69. </template>
  71. <script>
  73. export default {
  74.   beforeCreate () {
  75.     this.form = this.$form.createForm(this);
  76.   },
  77.   methods: {
  78.     handleSubmit (e) {
  79.       e.preventDefault();
  80.       this.form.validateFields((err, values) => {
  81.         if (!err) {
  82.           console.log('Received values of form: ', values);
  83.         }
  84.       });
  85.     },
  86.   },
  87. };
  88. </script>
  89. <style>
  90. #components-form-demo-normal-login .login-form {
  91.   max-width: 300px;
  92. }
  93. #components-form-demo-normal-login .login-form-forgot {
  94.   float: right;
  95. }
  96. #components-form-demo-normal-login .login-form-button {
  97.   width: 100%;
  98. }
  99. </style>

Form表单 - 图14

注册新用户

用户填写必须的信息以注册新用户。

  1. <template>
  2.   <a-form
  3.     :form="form"
  4.     @submit="handleSubmit"
  5.   >
  6.     <a-form-item
  7.       v-bind="formItemLayout"
  8.       label="E-mail"
  9.     >
  10.       <a-input
  11.         v-decorator="[
  12.           'email',
  13.           {
  14.             rules: [{
  15.               type: 'email', message: 'The input is not valid E-mail!',
  16.             }, {
  17.               required: true, message: 'Please input your E-mail!',
  18.             }]
  19.           }
  20.         ]"
  21.       />
  22.     </a-form-item>
  23.     <a-form-item
  24.       v-bind="formItemLayout"
  25.       label="Password"
  26.     >
  27.       <a-input
  28.         v-decorator="[
  29.           'password',
  30.           {
  31.             rules: [{
  32.               required: true, message: 'Please input your password!',
  33.             }, {
  34.               validator: validateToNextPassword,
  35.             }],
  36.           }
  37.         ]"
  38.         type="password"
  39.       />
  40.     </a-form-item>
  41.     <a-form-item
  42.       v-bind="formItemLayout"
  43.       label="Confirm Password"
  44.     >
  45.       <a-input
  46.         v-decorator="[
  47.           'confirm',
  48.           {
  49.             rules: [{
  50.               required: true, message: 'Please confirm your password!',
  51.             }, {
  52.               validator: compareToFirstPassword,
  53.             }],
  54.           }
  55.         ]"
  56.         type="password"
  57.         @blur="handleConfirmBlur"
  58.       />
  59.     </a-form-item>
  60.     <a-form-item
  61.       v-bind="formItemLayout"
  62.     >
  63.       <span slot="label">
  64.         Nickname&nbsp;
  65.         <a-tooltip title="What do you want others to call you?">
  66.           <a-icon type="question-circle-o" />
  67.         </a-tooltip>
  68.       </span>
  69.       <a-input
  70.         v-decorator="[
  71.           'nickname',
  72.           {
  73.             rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }]
  74.           }
  75.         ]"
  76.       />
  77.     </a-form-item>
  78.     <a-form-item
  79.       v-bind="formItemLayout"
  80.       label="Habitual Residence"
  81.     >
  82.       <a-cascader
  83.         v-decorator="[
  84.           'residence',
  85.           {
  86.             initialValue: ['zhejiang', 'hangzhou', 'xihu'],
  87.             rules: [{ type: 'array', required: true, message: 'Please select your habitual residence!' }],
  88.           }
  89.         ]"
  90.         :options="residences"
  91.       />
  92.     </a-form-item>
  93.     <a-form-item
  94.       v-bind="formItemLayout"
  95.       label="Phone Number"
  96.     >
  97.       <a-input
  98.         v-decorator="[
  99.           'phone',
  100.           {
  101.             rules: [{ required: true, message: 'Please input your phone number!' }],
  102.           }
  103.         ]"
  104.         style="width: 100%"
  105.       >
  106.         <a-select
  107.           slot="addonBefore"
  108.           v-decorator="[
  109.             'prefix',
  110.             { initialValue: '86' }
  111.           ]"
  112.           style="width: 70px"
  113.         >
  114.           <a-select-option value="86">
  115.             +86
  116.           </a-select-option>
  117.           <a-select-option value="87">
  118.             +87
  119.           </a-select-option>
  120.         </a-select>
  121.       </a-input>
  122.     </a-form-item>
  123.     <a-form-item
  124.       v-bind="formItemLayout"
  125.       label="Website"
  126.     >
  127.       <a-auto-complete
  128.         v-decorator="[
  129.           'website',
  130.           {rules: [{ required: true, message: 'Please input website!' }]}
  131.         ]"
  132.         placeholder="website"
  133.         @change="handleWebsiteChange"
  134.       >
  135.         <template slot="dataSource">
  136.           <a-select-option
  137.             v-for="website in autoCompleteResult"
  138.             :key="website"
  139.           >
  140.             {{ website }}
  141.           </a-select-option>
  142.         </template>
  143.         <a-input />
  144.       </a-auto-complete>
  145.     </a-form-item>
  146.     <a-form-item
  147.       v-bind="formItemLayout"
  148.       label="Captcha"
  149.       extra="We must make sure that your are a human."
  150.     >
  151.       <a-row :gutter="8">
  152.         <a-col :span="12">
  153.           <a-input
  154.             v-decorator="[
  155.               'captcha',
  156.               {rules: [{ required: true, message: 'Please input the captcha you got!' }]}
  157.             ]"
  158.           />
  159.         </a-col>
  160.         <a-col :span="12">
  161.           <a-button>Get captcha</a-button>
  162.         </a-col>
  163.       </a-row>
  164.     </a-form-item>
  165.     <a-form-item v-bind="tailFormItemLayout">
  166.       <a-checkbox
  167.         v-decorator="['agreement', {valuePropName: 'checked'}]"
  168.       >
  169.         I have read the <a href="">
  170.           agreement
  171.         </a>
  172.       </a-checkbox>
  173.     </a-form-item>
  174.     <a-form-item v-bind="tailFormItemLayout">
  175.       <a-button
  176.         type="primary"
  177.         html-type="submit"
  178.       >
  179.         Register
  180.       </a-button>
  181.     </a-form-item>
  182.   </a-form>
  183. </template>
  185. <script>
  186. const residences = [{
  187.   value: 'zhejiang',
  188.   label: 'Zhejiang',
  189.   children: [{
  190.     value: 'hangzhou',
  191.     label: 'Hangzhou',
  192.     children: [{
  193.       value: 'xihu',
  194.       label: 'West Lake',
  195.     }],
  196.   }],
  197. }, {
  198.   value: 'jiangsu',
  199.   label: 'Jiangsu',
  200.   children: [{
  201.     value: 'nanjing',
  202.     label: 'Nanjing',
  203.     children: [{
  204.       value: 'zhonghuamen',
  205.       label: 'Zhong Hua Men',
  206.     }],
  207.   }],
  208. }];
  210. export default {
  211.   data () {
  212.     return {
  213.       confirmDirty: false,
  214.       residences,
  215.       autoCompleteResult: [],
  216.       formItemLayout: {
  217.         labelCol: {
  218.           xs: { span: 24 },
  219.           sm: { span: 8 },
  220.         },
  221.         wrapperCol: {
  222.           xs: { span: 24 },
  223.           sm: { span: 16 },
  224.         },
  225.       },
  226.       tailFormItemLayout: {
  227.         wrapperCol: {
  228.           xs: {
  229.             span: 24,
  230.             offset: 0,
  231.           },
  232.           sm: {
  233.             span: 16,
  234.             offset: 8,
  235.           },
  236.         },
  237.       },
  238.     };
  239.   },
  240.   beforeCreate () {
  241.     this.form = this.$form.createForm(this);
  242.   },
  243.   methods: {
  244.     handleSubmit  (e) {
  245.       e.preventDefault();
  246.       this.form.validateFieldsAndScroll((err, values) => {
  247.         if (!err) {
  248.           console.log('Received values of form: ', values);
  249.         }
  250.       });
  251.     },
  252.     handleConfirmBlur  (e) {
  253.       const value = e.target.value;
  254.       this.confirmDirty = this.confirmDirty || !!value;
  255.     },
  256.     compareToFirstPassword  (rule, value, callback) {
  257.       const form = this.form;
  258.       if (value && value !== form.getFieldValue('password')) {
  259.         callback('Two passwords that you enter is inconsistent!');
  260.       } else {
  261.         callback();
  262.       }
  263.     },
  264.     validateToNextPassword  (rule, value, callback) {
  265.       const form = this.form;
  266.       if (value && this.confirmDirty) {
  267.         form.validateFields(['confirm'], { force: true });
  268.       }
  269.       callback();
  270.     },
  271.     handleWebsiteChange  (value) {
  272.       let autoCompleteResult;
  273.       if (!value) {
  274.         autoCompleteResult = [];
  275.       } else {
  276.         autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
  277.       }
  278.       this.autoCompleteResult = autoCompleteResult;
  279.     },
  280.   },
  281. };
  282. </script>

Form表单 - 图15

时间类控件

时间类组件的 value 类型为 moment 对象，所以在提交服务器前需要预处理。

  1. <template>
  2.   <a-form
  3.     :form="form"
  4.     @submit="handleSubmit"
  5.   >
  6.     <a-form-item
  7.       v-bind="formItemLayout"
  8.       label="DatePicker"
  9.     >
  10.       <a-date-picker v-decorator="['date-picker', config]" />
  11.     </a-form-item>
  12.     <a-form-item
  13.       v-bind="formItemLayout"
  14.       label="DatePicker[showTime]"
  15.     >
  16.       <a-date-picker
  17.         v-decorator="['date-time-picker', config]"
  18.         show-time
  19.         format="YYYY-MM-DD HH:mm:ss"
  20.       />
  21.     </a-form-item>
  22.     <a-form-item
  23.       v-bind="formItemLayout"
  24.       label="MonthPicker"
  25.     >
  26.       <a-monthPicker v-decorator="['month-picker', config]" />
  27.     </a-form-item>
  28.     <a-form-item
  29.       v-bind="formItemLayout"
  30.       label="RangePicker"
  31.     >
  32.       <a-range-picker v-decorator="['range-picker', rangeConfig]" />
  33.     </a-form-item>
  34.     <a-form-item
  35.       v-bind="formItemLayout"
  36.       label="RangePicker[showTime]"
  37.     >
  38.       <a-range-picker
  39.         v-decorator="['range-time-picker', rangeConfig]"
  40.         show-time
  41.         format="YYYY-MM-DD HH:mm:ss"
  42.       />
  43.     </a-form-item>
  44.     <a-form-item
  45.       v-bind="formItemLayout"
  46.       label="TimePicker"
  47.     >
  48.       <a-time-picker v-decorator="['time-picker', config]" />
  49.     </a-form-item>
  50.     <a-form-item
  51.       :wrapper-col="{
  52.         xs: { span: 24, offset: 0 },
  53.         sm: { span: 16, offset: 8 },
  54.       }"
  55.     >
  56.       <a-button
  57.         type="primary"
  58.         html-type="submit"
  59.       >
  60.         Submit
  61.       </a-button>
  62.     </a-form-item>
  63.   </a-form>
  64. </template>
  65. <script>
  66. export default {
  67.   data () {
  68.     return {
  69.       formItemLayout: {
  70.         labelCol: {
  71.           xs: { span: 24 },
  72.           sm: { span: 8 },
  73.         },
  74.         wrapperCol: {
  75.           xs: { span: 24 },
  76.           sm: { span: 16 },
  77.         },
  78.       },
  79.       config: {
  80.         rules: [{ type: 'object', required: true, message: 'Please select time!' }],
  81.       },
  82.       rangeConfig: {
  83.         rules: [{ type: 'array', required: true, message: 'Please select time!' }],
  84.       },
  85.     };
  86.   },
  87.   beforeCreate () {
  88.     this.form = this.$form.createForm(this);
  89.   },
  90.   methods: {
  91.     handleSubmit  (e) {
  92.       e.preventDefault();
  93.       this.form.validateFields((err, fieldsValue) => {
  94.         if (err) {
  95.           return;
  96.         }
  98.         // Should format date value before submit.
  99.         const rangeValue = fieldsValue['range-picker'];
  100.         const rangeTimeValue = fieldsValue['range-time-picker'];
  101.         const values = {
  102.           ...fieldsValue,
  103.           'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
  104.           'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
  105.           'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
  106.           'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
  107.           'range-time-picker': [
  108.             rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
  109.             rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
  110.           ],
  111.           'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
  112.         };
  113.         console.log('Received values of form: ', values);
  114.       });
  115.     },
  116.   },
  117. };
  118. </script>

Form表单 - 图16

校验其他组件

以上演示没有出现的表单控件对应的校验演示。

  1. <template>
  2.   <a-form
  3.     id="components-form-demo-validate-other"
  4.     :form="form"
  5.     @submit="handleSubmit"
  6.   >
  7.     <a-form-item
  8.       v-bind="formItemLayout"
  9.       label="Plain Text"
  10.     >
  11.       <span class="ant-form-text">
  12.         China
  13.       </span>
  14.     </a-form-item>
  15.     <a-form-item
  16.       v-bind="formItemLayout"
  17.       label="Select"
  18.       has-feedback
  19.     >
  20.       <a-select
  21.         v-decorator="[
  22.           'select',
  23.           {rules: [{ required: true, message: 'Please select your country!' }]}
  24.         ]"
  25.         placeholder="Please select a country"
  26.       >
  27.         <a-select-option value="china">
  28.           China
  29.         </a-select-option>
  30.         <a-select-option value="usa">
  31.           U.S.A
  32.         </a-select-option>
  33.       </a-select>
  34.     </a-form-item>
  36.     <a-form-item
  37.       v-bind="formItemLayout"
  38.       label="Select[multiple]"
  39.     >
  40.       <a-select
  41.         v-decorator="[
  42.           'select-multiple', {
  43.             rules: [{ required: true, message: 'Please select your favourite colors!', type: 'array' }],
  44.           }]"
  45.         mode="multiple"
  46.         placeholder="Please select favourite colors"
  47.       >
  48.         <a-select-option value="red">
  49.           Red
  50.         </a-select-option>
  51.         <a-select-option value="green">
  52.           Green
  53.         </a-select-option>
  54.         <a-select-option value="blue">
  55.           Blue
  56.         </a-select-option>
  57.       </a-select>
  58.     </a-form-item>
  60.     <a-form-item
  61.       v-bind="formItemLayout"
  62.       label="InputNumber"
  63.     >
  64.       <a-input-number
  65.         v-decorator="['input-number', { initialValue: 3 }]"
  66.         :min="1"
  67.         :max="10"
  68.       />
  69.       <span class="ant-form-text">
  70.         machines
  71.       </span>
  72.     </a-form-item>
  74.     <a-form-item
  75.       v-bind="formItemLayout"
  76.       label="Switch"
  77.     >
  78.       <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />
  79.     </a-form-item>
  81.     <a-form-item
  82.       v-bind="formItemLayout"
  83.       label="Slider"
  84.     >
  85.       <a-slider
  86.         v-decorator="['slider']"
  87.         :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
  88.       />
  89.     </a-form-item>
  91.     <a-form-item
  92.       v-bind="formItemLayout"
  93.       label="Radio.Group"
  94.     >
  95.       <a-radio-group v-decorator="['radio-group']">
  96.         <a-radio value="a">
  97.           item 1
  98.         </a-radio>
  99.         <a-radio value="b">
  100.           item 2
  101.         </a-radio>
  102.         <a-radio value="c">
  103.           item 3
  104.         </a-radio>
  105.       </a-radio-group>
  106.     </a-form-item>
  108.     <a-form-item
  109.       v-bind="formItemLayout"
  110.       label="Radio.Button"
  111.     >
  112.       <a-radio-group v-decorator="['radio-button']">
  113.         <a-radio-button value="a">
  114.           item 1
  115.         </a-radio-button>
  116.         <a-radio-button value="b">
  117.           item 2
  118.         </a-radio-button>
  119.         <a-radio-button value="c">
  120.           item 3
  121.         </a-radio-button>
  122.       </a-radio-group>
  123.     </a-form-item>
  125.     <a-form-item
  126.       v-bind="formItemLayout"
  127.       label="Checkbox.Group"
  128.     >
  129.       <a-checkbox-group
  130.         v-decorator="['checkbox-group', {initialValue: ['A', 'B']}]"
  131.         style="width: 100%;"
  132.       >
  133.         <a-row>
  134.           <a-col :span="8">
  135.             <a-checkbox value="A">
  136.               A
  137.             </a-checkbox>
  138.           </a-col>
  139.           <a-col :span="8">
  140.             <a-checkbox
  141.               disabled
  142.               value="B"
  143.             >
  144.               B
  145.             </a-checkbox>
  146.           </a-col>
  147.           <a-col :span="8">
  148.             <a-checkbox value="C">
  149.               C
  150.             </a-checkbox>
  151.           </a-col>
  152.           <a-col :span="8">
  153.             <a-checkbox value="D">
  154.               D
  155.             </a-checkbox>
  156.           </a-col>
  157.           <a-col :span="8">
  158.             <a-checkbox value="E">
  159.               E
  160.             </a-checkbox>
  161.           </a-col>
  162.         </a-row>
  163.       </a-checkbox-group>
  164.     </a-form-item>
  166.     <a-form-item
  167.       v-bind="formItemLayout"
  168.       label="Rate"
  169.     >
  170.       <a-rate
  171.         v-decorator="['rate', {initialValue: 3.5}]"
  172.         allow-half
  173.       />
  174.     </a-form-item>
  176.     <a-form-item
  177.       v-bind="formItemLayout"
  178.       label="Upload"
  179.       extra="longgggggggggggggggggggggggggggggggggg"
  180.     >
  181.       <a-upload
  182.         v-decorator="['upload', {
  183.           valuePropName: 'fileList',
  184.           getValueFromEvent: normFile,
  185.         }]"
  186.         name="logo"
  187.         action="/upload.do"
  188.         list-type="picture"
  189.       >
  190.         <a-button>
  191.           <a-icon type="upload" /> Click to upload
  192.         </a-button>
  193.       </a-upload>
  194.     </a-form-item>
  196.     <a-form-item
  197.       v-bind="formItemLayout"
  198.       label="Dragger"
  199.     >
  200.       <div class="dropbox">
  201.         <a-upload-dragger
  202.           v-decorator="['dragger', {
  203.             valuePropName: 'fileList',
  204.             getValueFromEvent: normFile,
  205.           }]"
  206.           name="files"
  207.           action="/upload.do"
  208.         >
  209.           <p class="ant-upload-drag-icon">
  210.             <a-icon type="inbox" />
  211.           </p>
  212.           <p class="ant-upload-text">
  213.             Click or drag file to this area to upload
  214.           </p>
  215.           <p class="ant-upload-hint">
  216.             Support for a single or bulk upload.
  217.           </p>
  218.         </a-upload-dragger>
  219.       </div>
  220.     </a-form-item>
  222.     <a-form-item
  223.       :wrapper-col="{ span: 12, offset: 6 }"
  224.     >
  225.       <a-button
  226.         type="primary"
  227.         html-type="submit"
  228.       >
  229.         Submit
  230.       </a-button>
  231.     </a-form-item>
  232.   </a-form>
  233. </template>
  235. <script>
  236. export default {
  237.   data: () => ({
  238.     formItemLayout: {
  239.       labelCol: { span: 6 },
  240.       wrapperCol: { span: 14 },
  241.     },
  242.   }),
  243.   beforeCreate () {
  244.     this.form = this.$form.createForm(this);
  245.   },
  246.   methods: {
  247.     handleSubmit  (e) {
  248.       e.preventDefault();
  249.       this.form.validateFields((err, values) => {
  250.         if (!err) {
  251.           console.log('Received values of form: ', values);
  252.         }
  253.       });
  254.     },
  255.     normFile  (e) {
  256.       console.log('Upload event:', e);
  257.       if (Array.isArray(e)) {
  258.         return e;
  259.       }
  260.       return e && e.fileList;
  261.     },
  262.   },
  263. };
  264. </script>
  265. <style>
  266. #components-form-demo-validate-other .dropbox {
  267.   height: 180px;
  268.   line-height: 1.5;
  269. }
  270. </style>

API

Form

参数说明类型默认值
form经 Form.create() 包装过的组件会自带 this.form 属性，如果使用template语法，可以使用this.$form.createForm(this, options)object无
hideRequiredMark隐藏所有表单项的必选标记Booleanfalse
layout表单布局'horizontal'|'vertical'|'inline''horizontal'

事件

事件名称说明回调参数
submit数据验证成功后回调事件Function(e:Event)

Form.create(options) | this.$form.createForm(this, options)

使用方式如下：

jsx使用方式，使用方式和React版antd一致

  1. const CustomizedForm = {}
  3. CustomizedForm = Form.create({})(CustomizedForm);

如果需要为包装组件实例维护一个ref，可以使用wrappedComponentRef。

单文件template使用方式

  1. <template>
  2. <a-form :form="form" />
  3. </template>
  4. <script>
  5. export default {
  6.   beforeCreate () {
  7.     this.form = this.$form.createForm(this, options)
  8.   },
  9. }
  10. </script>

options 的配置项如下。

参数说明类型
props仅仅支持Form.create({})(CustomizedForm)的使用方式，父组件需要映射到表单项上的属性声明(和vue组件props一致){}
mapPropsToFields把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 Form.createFormField 标记，如果使用$form.createForm创建收集器，你可以将任何数据映射到Field中，不受父组件约束(props) => ({ [fieldName]: FormField { value } })
validateMessages默认校验信息，可用于把默认错误信息改为中文等，格式与 newMessages 返回值一致Object { [nested.path]: String }
onFieldsChange当 Form.Item 子节点的值发生改变时触发，可以把对应的值转存到 Redux storeFunction(props, fields)
onValuesChange任一表单域的值发生改变时的回调(props, values) => void

经过 Form.create 包装的组件将会自带 this.form 属性，this.form 提供的 API 如下：

注意：使用 getFieldsValue getFieldValue setFieldsValue 等时，应确保对应的 field 已经用 getFieldDecorator 或 v-decorator 注册过了。

方法说明类型
getFieldDecorator用于和表单进行双向绑定，单文件template可以使用指令v-decorator进行绑定，详见下方描述
getFieldError获取某个输入控件的 ErrorFunction(name)
getFieldsError获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 ErrorFunction([names: string[]])
getFieldsValue获取一组输入控件的值，如不传入参数，则获取全部组件的值Function([fieldNames: string[]])
getFieldValue获取一个输入控件的值Function(fieldName: string)
isFieldsTouched判断是否任一输入控件经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger(names?: string[]) => boolean
isFieldTouched判断一个输入控件是否经历过 getFieldDecorator 或 v-decorator 的值收集时机 options.trigger(name: string) => boolean
isFieldValidating判断一个输入控件是否在校验状态Function(name)
resetFields重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件Function([names: string[]])
setFields设置一组输入控件的值与错误状态。Function({ [fieldName]: { value: any, errors: [Error] } })
setFieldsValue设置一组输入控件的值Function({ [fieldName]: value }
validateFields校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件Function([fieldNames: string[]], [options: object], callback: Function(errors, values))
validateFieldsAndScroll与 validateFields 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围参考 validateFields

validateFields/validateFieldsAndScroll

  1. const { form: { validateFields } } = this;
  2. validateFields((errors, values) => {
  3.   // ...
  4. });
  5. validateFields(['field1', 'field2'], (errors, values) => {
  6.   // ...
  7. });
  8. validateFields(['field1', 'field2'], options, (errors, values) => {
  9.   // ...
  10. });
参数说明类型默认值
options.first若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验booleanfalse
options.firstFields指定表单域会在碰到第一个失败了的校验规则后停止校验String[][]
options.force对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验booleanfalse
options.scroll定义 validateFieldsAndScroll 的滚动行为，详细配置见 dom-scroll-into-view configObject{}

validateFields 的 callback 参数示例

  • errors:
  1. {
  2.   "userName": {
  3.     "errors": [
  4.       {
  5.         "message": "Please input your username!",
  6.         "field": "userName"
  7.       }
  8.     ]
  9.   },
  10.   "password": {
  11.     "errors": [
  12.       {
  13.         "message": "Please input your Password!",
  14.         "field": "password"
  15.       }
  16.     ]
  17.   }
  18. }
  • values:
  1. {
  2.   "userName": "username",
  3.   "password": "password",
  4. }

Form.createFormField

用于标记 mapPropsToFields 返回的表单域数据，例子。

this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"

经过 getFieldDecorator或v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

  • 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
  • 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
  • 你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

特别注意

getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数

参数说明类型默认值
id必填输入控件唯一标志。支持嵌套式的写法。string
options.getValueFromEvent可以把 onChange 的参数（如 event）转化为控件的值function(..args)reference
options.initialValue子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 === 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量))
options.normalize转换默认的 value 给控件，一个选择全部的例子function(value, prevValue, allValues): any-
options.preserve即便字段不再使用，也保留该字段的值booleanfalse
options.rules校验规则，参考下方文档object[]
options.trigger收集子节点的值的时机string'change'
options.validateFirst当某一规则校验不通过时，是否停止剩下的规则的校验booleanfalse
options.validateTrigger校验子节点值的时机string|string[]'change'
options.valuePropName子节点的值的属性，如 Switch 的是 'checked'string'value'

Form.Item

注意：一个 Form.Item 建议只放一个被 getFieldDecorator或v-decorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。

参数说明类型默认值
colon配合 label 属性使用，表示是否显示 label 后面的冒号booleantrue
extra额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。string|slot
hasFeedback配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用booleanfalse
help提示信息，如不设置，则会根据校验规则自动生成string|slot
labellabel 标签的文本string|slot
labelCollabel 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12}object
required是否必填，如不设置，则会根据校验规则自动生成booleanfalse
validateStatus校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating'string
wrapperCol需要为输入控件设置布局样式时，使用该属性，用法同 labelColobject

校验规则

参数说明类型默认值
enum枚举类型string-
len字段长度number-
max最大长度number-
message校验文案string-
min最小长度number-
pattern正则表达式校验RegExp-
required是否必选booleanfalse
transform校验前转换字段值function(value) => transformedValue:any-
type内建校验类型，可选项string'string'
validator自定义校验（注意，callback 必须被调用）function(rule, value, callback)-
whitespace必选时，空格是否会被视为错误booleanfalse

更多高级用法可研究 async-validator。