• Form 表单
    • 表单
    • 表单域
    • 注意：
    • 代码演示
      • 表单联动
      • 动态校验规则
      • 水平登录栏
      • 表单布局
      • 自定义校验
      • 自行处理表单数据
      • 高级搜索
      • 自定义表单控件
      • 动态增减表单项
      • 弹出层中的新建表单
      • 表单数据存储于上层组件
      • 表单数据存储于 Vuex Store 中
      • 登录框
      • 注册新用户
      • 时间类控件
      • 校验其他组件
  • API
    • Form
    • 事件
    • Form.create(options) | this.$form.createForm(this, options)
      • jsx使用方式，使用方式和React版antd一致
      • 单文件template使用方式
    • validateFields/validateFieldsAndScroll
      • validateFields 的 callback 参数示例
    • Form.createFormField
    • this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"
      • 特别注意
      • getFieldDecorator(id, options) 和 v-decorator="[id, options]" 参数
    • Form.Item
    • 校验规则

    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 和 v-decorator 不能用于装饰纯函数组件。
    • getFieldDecorator 和 v-decorator 调用不能位于纯函数组件中 https://cn.vuejs.org/v2/api/#functional。

    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。