diff --git a/components/form-model/Form.jsx b/components/form-model/Form.jsx
deleted file mode 100755
index 111b19db6..000000000
--- a/components/form-model/Form.jsx
+++ /dev/null
@@ -1,282 +0,0 @@
-import { inject, provide } from 'vue';
-import PropTypes from '../_util/vue-types';
-import classNames from 'classnames';
-import { ColProps } from '../grid/Col';
-import isRegExp from 'lodash/isRegExp';
-import warning from '../_util/warning';
-import FormItem from './FormItem';
-import { initDefaultProps, getSlot } from '../_util/props-util';
-import { ConfigConsumerProps } from '../config-provider';
-import { getNamePath, containsNamePath } from './utils/valueUtil';
-import { defaultValidateMessages } from './utils/messages';
-import { allPromiseFinish } from './utils/asyncUtil';
-import { toArray } from './utils/typeUtil';
-import isEqual from 'lodash/isEqual';
-import scrollIntoView from 'scroll-into-view-if-needed';
-
-export const FormProps = {
-  layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
-  labelCol: PropTypes.shape(ColProps).loose,
-  wrapperCol: PropTypes.shape(ColProps).loose,
-  colon: PropTypes.bool,
-  labelAlign: PropTypes.oneOf(['left', 'right']),
-  prefixCls: PropTypes.string,
-  hideRequiredMark: PropTypes.bool,
-  model: PropTypes.object,
-  rules: PropTypes.object,
-  validateMessages: PropTypes.any,
-  validateOnRuleChange: PropTypes.bool,
-  // 提交失败自动滚动到第一个错误字段
-  scrollToFirstError: PropTypes.bool,
-  onFinish: PropTypes.func,
-  onFinishFailed: PropTypes.func,
-  name: PropTypes.name,
-};
-
-export const ValidationRule = {
-  /** validation error message */
-  message: PropTypes.string,
-  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
-  type: PropTypes.string,
-  /** indicates whether field is required */
-  required: PropTypes.boolean,
-  /** treat required fields that only contain whitespace as errors */
-  whitespace: PropTypes.boolean,
-  /** validate the exact length of a field */
-  len: PropTypes.number,
-  /** validate the min length of a field */
-  min: PropTypes.number,
-  /** validate the max length of a field */
-  max: PropTypes.number,
-  /** validate the value from a list of possible values */
-  enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
-  /** validate from a regular expression */
-  pattern: PropTypes.custom(isRegExp),
-  /** transform a value before validation */
-  transform: PropTypes.func,
-  /** custom validate function (Note: callback must be called) */
-  validator: PropTypes.func,
-};
-
-function isEqualName(name1, name2) {
-  return isEqual(toArray(name1), toArray(name2));
-}
-
-const Form = {
-  name: 'AFormModel',
-  inheritAttrs: false,
-  props: initDefaultProps(FormProps, {
-    layout: 'horizontal',
-    hideRequiredMark: false,
-    colon: true,
-  }),
-  Item: FormItem,
-  created() {
-    this.fields = [];
-    this.form = undefined;
-    this.lastValidatePromise = null;
-    provide('FormContext', this);
-  },
-  setup() {
-    return {
-      configProvider: inject('configProvider', ConfigConsumerProps),
-    };
-  },
-  watch: {
-    rules() {
-      if (this.validateOnRuleChange) {
-        this.validateFields();
-      }
-    },
-  },
-  computed: {
-    vertical() {
-      return this.layout === 'vertical';
-    },
-  },
-  methods: {
-    addField(field) {
-      if (field) {
-        this.fields.push(field);
-      }
-    },
-    removeField(field) {
-      if (field.fieldName) {
-        this.fields.splice(this.fields.indexOf(field), 1);
-      }
-    },
-    handleSubmit(e) {
-      e.preventDefault();
-      e.stopPropagation();
-      this.$emit('submit', e);
-      const res = this.validateFields();
-      res
-        .then(values => {
-          this.$emit('finish', values);
-        })
-        .catch(errors => {
-          this.handleFinishFailed(errors);
-        });
-    },
-    getFieldsByNameList(nameList) {
-      const provideNameList = !!nameList;
-      const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
-      if (!provideNameList) {
-        return this.fields;
-      } else {
-        return this.fields.filter(
-          field => namePathList.findIndex(namePath => isEqualName(namePath, field.fieldName)) > -1,
-        );
-      }
-    },
-    resetFields(name) {
-      if (!this.model) {
-        warning(false, 'Form', 'model is required for resetFields to work.');
-        return;
-      }
-      this.getFieldsByNameList(name).forEach(field => {
-        field.resetField();
-      });
-    },
-    clearValidate(name) {
-      this.getFieldsByNameList(name).forEach(field => {
-        field.clearValidate();
-      });
-    },
-    handleFinishFailed(errorInfo) {
-      const { scrollToFirstError } = this;
-      this.$emit('finishFailed', errorInfo);
-      if (scrollToFirstError && errorInfo.errorFields.length) {
-        this.scrollToField(errorInfo.errorFields[0].name);
-      }
-    },
-    validate() {
-      return this.validateField(...arguments);
-    },
-    scrollToField(name, options = {}) {
-      const fields = this.getFieldsByNameList([name]);
-      if (fields.length) {
-        const fieldId = fields[0].fieldId;
-        const node = fieldId ? document.getElementById(fieldId) : null;
-
-        if (node) {
-          scrollIntoView(node, {
-            scrollMode: 'if-needed',
-            block: 'nearest',
-            ...options,
-          });
-        }
-      }
-    },
-    // eslint-disable-next-line no-unused-vars
-    getFieldsValue(nameList = true) {
-      const values = {};
-      this.fields.forEach(({ fieldName, fieldValue }) => {
-        values[fieldName] = fieldValue;
-      });
-      if (nameList === true) {
-        return values;
-      } else {
-        const res = {};
-        toArray(nameList).forEach(namePath => (res[namePath] = values[namePath]));
-        return res;
-      }
-    },
-    validateFields(nameList, options) {
-      if (!this.model) {
-        warning(false, 'Form', 'model is required for validateFields to work.');
-        return;
-      }
-      const provideNameList = !!nameList;
-      const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
-
-      // Collect result in promise list
-      const promiseList = [];
-
-      this.fields.forEach(field => {
-        // Add field if not provide `nameList`
-        if (!provideNameList) {
-          namePathList.push(field.getNamePath());
-        }
-
-        // Skip if without rule
-        if (!field.getRules().length) {
-          return;
-        }
-
-        const fieldNamePath = field.getNamePath();
-
-        // Add field validate rule in to promise list
-        if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
-          const promise = field.validateRules({
-            validateMessages: {
-              ...defaultValidateMessages,
-              ...this.validateMessages,
-            },
-            ...options,
-          });
-
-          // Wrap promise with field
-          promiseList.push(
-            promise
-              .then(() => ({ name: fieldNamePath, errors: [] }))
-              .catch(errors =>
-                Promise.reject({
-                  name: fieldNamePath,
-                  errors,
-                }),
-              ),
-          );
-        }
-      });
-
-      const summaryPromise = allPromiseFinish(promiseList);
-      this.lastValidatePromise = summaryPromise;
-
-      const returnPromise = summaryPromise
-        .then(() => {
-          if (this.lastValidatePromise === summaryPromise) {
-            return Promise.resolve(this.getFieldsValue(namePathList));
-          }
-          return Promise.reject([]);
-        })
-        .catch(results => {
-          const errorList = results.filter(result => result && result.errors.length);
-          return Promise.reject({
-            values: this.getFieldsValue(namePathList),
-            errorFields: errorList,
-            outOfDate: this.lastValidatePromise !== summaryPromise,
-          });
-        });
-
-      // Do not throw in console
-      returnPromise.catch(e => e);
-
-      return returnPromise;
-    },
-    validateField() {
-      return this.validateFields(...arguments);
-    },
-  },
-
-  render() {
-    const { prefixCls: customizePrefixCls, hideRequiredMark, layout, handleSubmit } = this;
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('form', customizePrefixCls);
-    const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
-
-    const formClassName = classNames(prefixCls, className, {
-      [`${prefixCls}-horizontal`]: layout === 'horizontal',
-      [`${prefixCls}-vertical`]: layout === 'vertical',
-      [`${prefixCls}-inline`]: layout === 'inline',
-      [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
-    });
-    return (
-      <form onSubmit={handleSubmit} class={formClassName} {...restProps}>
-        {getSlot(this)}
-      </form>
-    );
-  },
-};
-
-export default Form;
diff --git a/components/form-model/FormItem.jsx b/components/form-model/FormItem.jsx
deleted file mode 100644
index d3e21f8b2..000000000
--- a/components/form-model/FormItem.jsx
+++ /dev/null
@@ -1,498 +0,0 @@
-import { inject, provide, Transition } from 'vue';
-import cloneDeep from 'lodash/cloneDeep';
-import PropTypes from '../_util/vue-types';
-import classNames from 'classnames';
-import getTransitionProps from '../_util/getTransitionProps';
-import Row from '../grid/Row';
-import Col, { ColProps } from '../grid/Col';
-import hasProp, {
-  initDefaultProps,
-  findDOMNode,
-  getComponent,
-  getOptionProps,
-  getEvents,
-  isValidElement,
-  getSlot,
-} from '../_util/props-util';
-import BaseMixin from '../_util/BaseMixin';
-import { ConfigConsumerProps } from '../config-provider';
-import { cloneElement } from '../_util/vnode';
-import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
-import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
-import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
-import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { validateRules } from './utils/validateUtil';
-import { getNamePath } from './utils/valueUtil';
-import { toArray } from './utils/typeUtil';
-import { warning } from '../vc-util/warning';
-
-const iconMap = {
-  success: CheckCircleFilled,
-  warning: ExclamationCircleFilled,
-  error: CloseCircleFilled,
-  validating: LoadingOutlined,
-};
-
-function getPropByPath(obj, namePathList, strict) {
-  let tempObj = obj;
-
-  const keyArr = namePathList;
-  let i = 0;
-  try {
-    for (let len = keyArr.length; i < len - 1; ++i) {
-      if (!tempObj && !strict) break;
-      let key = keyArr[i];
-      if (key in tempObj) {
-        tempObj = tempObj[key];
-      } else {
-        if (strict) {
-          throw Error('please transfer a valid name path to form item!');
-        }
-        break;
-      }
-    }
-    if (strict && !tempObj) {
-      throw Error('please transfer a valid name path to form item!');
-    }
-  } catch (error) {
-    console.error('please transfer a valid name path to form item!');
-  }
-
-  return {
-    o: tempObj,
-    k: keyArr[i],
-    v: tempObj ? tempObj[keyArr[i]] : undefined,
-  };
-}
-export const FormItemProps = {
-  id: PropTypes.string,
-  htmlFor: PropTypes.string,
-  prefixCls: PropTypes.string,
-  label: PropTypes.any,
-  help: PropTypes.any,
-  extra: PropTypes.any,
-  labelCol: PropTypes.shape(ColProps).loose,
-  wrapperCol: PropTypes.shape(ColProps).loose,
-  hasFeedback: PropTypes.bool,
-  colon: PropTypes.bool,
-  labelAlign: PropTypes.oneOf(['left', 'right']),
-  prop: PropTypes.oneOfType([Array, String, Number]),
-  name: PropTypes.oneOfType([Array, String, Number]),
-  rules: PropTypes.oneOfType([Array, Object]),
-  autoLink: PropTypes.bool,
-  required: PropTypes.bool,
-  validateFirst: PropTypes.bool,
-  validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
-};
-
-export default {
-  name: 'AFormModelItem',
-  mixins: [BaseMixin],
-  inheritAttrs: false,
-  __ANT_NEW_FORM_ITEM: true,
-  props: initDefaultProps(FormItemProps, {
-    hasFeedback: false,
-    autoLink: true,
-  }),
-  setup() {
-    return {
-      isFormItemChildren: inject('isFormItemChildren', false),
-      configProvider: inject('configProvider', ConfigConsumerProps),
-      FormContext: inject('FormContext', {}),
-    };
-  },
-  data() {
-    warning(hasProp(this, 'prop'), `\`prop\` is deprecated. Please use \`name\` instead.`);
-    return {
-      validateState: this.validateStatus,
-      validateMessage: '',
-      validateDisabled: false,
-      validator: {},
-      helpShow: false,
-      errors: [],
-    };
-  },
-
-  computed: {
-    fieldName() {
-      return this.name || this.prop;
-    },
-    namePath() {
-      return getNamePath(this.fieldName);
-    },
-    fieldId() {
-      if (this.id) {
-        return this.id;
-      } else if (!this.namePath.length) {
-        return undefined;
-      } else {
-        const formName = this.FormContext.name;
-        const mergedId = this.namePath.join('_');
-        return formName ? `${formName}_${mergedId}` : mergedId;
-      }
-    },
-    fieldValue() {
-      const model = this.FormContext.model;
-      if (!model || !this.fieldName) {
-        return;
-      }
-      return getPropByPath(model, this.namePath, true).v;
-    },
-    isRequired() {
-      let rules = this.getRules();
-      let isRequired = false;
-      if (rules && rules.length) {
-        rules.every(rule => {
-          if (rule.required) {
-            isRequired = true;
-            return false;
-          }
-          return true;
-        });
-      }
-      return isRequired || this.required;
-    },
-  },
-  watch: {
-    validateStatus(val) {
-      this.validateState = val;
-    },
-  },
-  created() {
-    provide('isFormItemChildren', true);
-  },
-  mounted() {
-    if (this.fieldName) {
-      const { addField } = this.FormContext;
-      addField && addField(this);
-      this.initialValue = cloneDeep(this.fieldValue);
-    }
-  },
-  beforeUnmount() {
-    const { removeField } = this.FormContext;
-    removeField && removeField(this);
-  },
-  methods: {
-    getNamePath() {
-      const { fieldName } = this;
-      const { prefixName = [] } = this.FormContext;
-
-      return fieldName !== undefined ? [...prefixName, ...this.namePath] : [];
-    },
-    validateRules(options) {
-      const { validateFirst = false, messageVariables } = this.$props;
-      const { triggerName } = options || {};
-      const namePath = this.getNamePath();
-
-      let filteredRules = this.getRules();
-      if (triggerName) {
-        filteredRules = filteredRules.filter(rule => {
-          const { trigger } = rule;
-          if (!trigger) {
-            return true;
-          }
-          const triggerList = toArray(trigger);
-          return triggerList.includes(triggerName);
-        });
-      }
-      if (!filteredRules.length) {
-        return Promise.resolve();
-      }
-      const promise = validateRules(
-        namePath,
-        this.fieldValue,
-        filteredRules,
-        options,
-        validateFirst,
-        messageVariables,
-      );
-      this.validateState = 'validating';
-      this.errors = [];
-
-      promise
-        .catch(e => e)
-        .then((errors = []) => {
-          if (this.validateState === 'validating') {
-            this.validateState = errors.length ? 'error' : 'success';
-            this.validateMessage = errors[0];
-            this.errors = errors;
-          }
-        });
-
-      return promise;
-    },
-    getRules() {
-      let formRules = this.FormContext.rules;
-      const selfRules = this.rules;
-      const requiredRule =
-        this.required !== undefined ? { required: !!this.required, trigger: 'change' } : [];
-      const prop = getPropByPath(formRules, this.namePath);
-      formRules = formRules ? prop.o[prop.k] || prop.v : [];
-      return [].concat(selfRules || formRules || []).concat(requiredRule);
-    },
-    getFilteredRule(trigger) {
-      const rules = this.getRules();
-      return rules
-        .filter(rule => {
-          if (!rule.trigger || trigger === '') return true;
-          if (Array.isArray(rule.trigger)) {
-            return rule.trigger.indexOf(trigger) > -1;
-          } else {
-            return rule.trigger === trigger;
-          }
-        })
-        .map(rule => ({ ...rule }));
-    },
-    onFieldBlur() {
-      this.validateRules({ triggerName: 'blur' });
-    },
-    onFieldChange() {
-      if (this.validateDisabled) {
-        this.validateDisabled = false;
-        return;
-      }
-      this.validateRules({ triggerName: 'change' });
-    },
-    clearValidate() {
-      this.validateState = '';
-      this.validateMessage = '';
-      this.validateDisabled = false;
-    },
-    resetField() {
-      this.validateState = '';
-      this.validateMessage = '';
-      const model = this.FormContext.model || {};
-      const value = this.fieldValue;
-      const prop = getPropByPath(model, this.namePath, true);
-      this.validateDisabled = true;
-      if (Array.isArray(value)) {
-        prop.o[prop.k] = [].concat(this.initialValue);
-      } else {
-        prop.o[prop.k] = this.initialValue;
-      }
-      // reset validateDisabled after onFieldChange triggered
-      this.$nextTick(() => {
-        this.validateDisabled = false;
-      });
-    },
-    getHelpMessage() {
-      const help = getComponent(this, 'help');
-
-      return this.validateMessage || help;
-    },
-
-    onLabelClick() {
-      const id = this.fieldId;
-      if (!id) {
-        return;
-      }
-      const formItemNode = findDOMNode(this);
-      const control = formItemNode.querySelector(`[id="${id}"]`);
-      if (control && control.focus) {
-        control.focus();
-      }
-    },
-
-    onHelpAnimEnd(_key, helpShow) {
-      this.helpShow = helpShow;
-      if (!helpShow) {
-        this.$forceUpdate();
-      }
-    },
-
-    renderHelp(prefixCls) {
-      const help = this.getHelpMessage();
-      const children = help ? (
-        <div class={`${prefixCls}-explain`} key="help">
-          {help}
-        </div>
-      ) : null;
-      if (children) {
-        this.helpShow = !!children;
-      }
-      const transitionProps = getTransitionProps('show-help', {
-        onAfterEnter: () => this.onHelpAnimEnd('help', true),
-        onAfterLeave: () => this.onHelpAnimEnd('help', false),
-      });
-      return (
-        <Transition {...transitionProps} key="help">
-          {children}
-        </Transition>
-      );
-    },
-
-    renderExtra(prefixCls) {
-      const extra = getComponent(this, 'extra');
-      return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
-    },
-
-    renderValidateWrapper(prefixCls, c1, c2, c3) {
-      const validateStatus = this.validateState;
-
-      let classes = `${prefixCls}-item-control`;
-      if (validateStatus) {
-        classes = classNames(`${prefixCls}-item-control`, {
-          'has-feedback': this.hasFeedback || validateStatus === 'validating',
-          'has-success': validateStatus === 'success',
-          'has-warning': validateStatus === 'warning',
-          'has-error': validateStatus === 'error',
-          'is-validating': validateStatus === 'validating',
-        });
-      }
-      const IconNode = validateStatus && iconMap[validateStatus];
-
-      const icon =
-        this.hasFeedback && IconNode ? (
-          <span class={`${prefixCls}-item-children-icon`}>
-            <IconNode />
-          </span>
-        ) : null;
-      return (
-        <div class={classes}>
-          <span class={`${prefixCls}-item-children`}>
-            {c1}
-            {icon}
-          </span>
-          {c2}
-          {c3}
-        </div>
-      );
-    },
-
-    renderWrapper(prefixCls, children) {
-      const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext;
-      const { wrapperCol } = this;
-      const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
-      const { style, id, ...restProps } = mergedWrapperCol;
-      const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class);
-      const colProps = {
-        ...restProps,
-        class: className,
-        key: 'wrapper',
-        style,
-        id,
-      };
-      return <Col {...colProps}>{children}</Col>;
-    },
-
-    renderLabel(prefixCls) {
-      const {
-        vertical,
-        labelAlign: contextLabelAlign,
-        labelCol: contextLabelCol,
-        colon: contextColon,
-      } = this.FormContext;
-      const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
-      const label = getComponent(this, 'label');
-      const required = this.isRequired;
-      const mergedLabelCol = labelCol || contextLabelCol || {};
-
-      const mergedLabelAlign = labelAlign || contextLabelAlign;
-      const labelClsBasic = `${prefixCls}-item-label`;
-      const labelColClassName = classNames(
-        labelClsBasic,
-        mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
-        mergedLabelCol.class,
-      );
-      const {
-        class: labelColClass,
-        style: labelColStyle,
-        id: labelColId,
-        ...restProps
-      } = mergedLabelCol;
-      let labelChildren = label;
-      // Keep label is original where there should have no colon
-      const computedColon = colon === true || (contextColon !== false && colon !== false);
-      const haveColon = computedColon && !vertical;
-      // Remove duplicated user input colon
-      if (haveColon && typeof label === 'string' && label.trim() !== '') {
-        labelChildren = label.replace(/[：:]\s*$/, '');
-      }
-
-      const labelClassName = classNames({
-        [`${prefixCls}-item-required`]: required,
-        [`${prefixCls}-item-no-colon`]: !computedColon,
-      });
-      const colProps = {
-        ...restProps,
-        class: labelColClassName,
-        key: 'label',
-        style: labelColStyle,
-        id: labelColId,
-      };
-
-      return label ? (
-        <Col {...colProps}>
-          <label
-            for={htmlFor || fieldId}
-            class={labelClassName}
-            title={typeof label === 'string' ? label : ''}
-            onClick={this.onLabelClick}
-          >
-            {labelChildren}
-          </label>
-        </Col>
-      ) : null;
-    },
-    renderChildren(prefixCls, child) {
-      return [
-        this.renderLabel(prefixCls),
-        this.renderWrapper(
-          prefixCls,
-          this.renderValidateWrapper(
-            prefixCls,
-            child,
-            this.renderHelp(prefixCls),
-            this.renderExtra(prefixCls),
-          ),
-        ),
-      ];
-    },
-    renderFormItem(child) {
-      const { prefixCls: customizePrefixCls } = this.$props;
-      const { class: className, ...restProps } = this.$attrs;
-      const getPrefixCls = this.configProvider.getPrefixCls;
-      const prefixCls = getPrefixCls('form', customizePrefixCls);
-      const children = this.renderChildren(prefixCls, child);
-      const itemClassName = {
-        [className]: className,
-        [`${prefixCls}-item`]: true,
-        [`${prefixCls}-item-with-help`]: this.helpShow,
-      };
-
-      return (
-        <Row class={classNames(itemClassName)} key="row" {...restProps}>
-          {children}
-        </Row>
-      );
-    },
-  },
-  render() {
-    const { autoLink } = getOptionProps(this);
-    const children = getSlot(this);
-    let firstChildren = children[0];
-    if (this.fieldName && autoLink && isValidElement(firstChildren)) {
-      const originalEvents = getEvents(firstChildren);
-      const originalBlur = originalEvents.onBlur;
-      const originalChange = originalEvents.onChange;
-      firstChildren = cloneElement(firstChildren, {
-        ...(this.fieldId ? { id: this.fieldId } : undefined),
-        onBlur: (...args) => {
-          originalBlur && originalBlur(...args);
-          this.onFieldBlur();
-        },
-        onChange: (...args) => {
-          if (Array.isArray(originalChange)) {
-            for (let i = 0, l = originalChange.length; i < l; i++) {
-              originalChange[i](...args);
-            }
-          } else if (originalChange) {
-            originalChange(...args);
-          }
-          this.onFieldChange();
-        },
-      });
-    }
-    return this.renderFormItem([firstChildren, children.slice(1)]);
-  },
-};
diff --git a/components/form-model/__tests__/__snapshots__/demo.test.js.snap b/components/form-model/__tests__/__snapshots__/demo.test.js.snap
deleted file mode 100644
index 5a248ee90..000000000
--- a/components/form-model/__tests__/__snapshots__/demo.test.js.snap
+++ /dev/null
@@ -1,282 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    </div></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
-        Online
-      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
-        Promotion
-      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
-        Offline
-      </span></label></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="">Resources</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
-        Sponsor
-      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
-        Venue
-      </span></label></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Cancel</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form-model/demo/custom-validation.md correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Password" class="">Password</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Age" class="">Age</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form-model/demo/dynamic-form-item.md correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>Add field</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form-model/demo/horizontal-login.md correctly 1`] = `
-<form class="ant-form ant-form-inline">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" class="ant-input"></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" class="ant-input"></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button disabled="disabled" type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
-        Horizontal
-      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
-        Vertical
-      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
-        Inline
-      </span></label></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Field A" class="">Field A</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Field B" class="">Field B</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    </div></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
-        Online
-      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
-        Promotion
-      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
-        Offline
-      </span></label></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
-        Sponsor
-      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
-        Venue
-      </span></label></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
diff --git a/components/form-model/__tests__/demo.test.js b/components/form-model/__tests__/demo.test.js
deleted file mode 100644
index 22a74f8a8..000000000
--- a/components/form-model/__tests__/demo.test.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('form-model');
diff --git a/components/form-model/index.jsx b/components/form-model/index.jsx
deleted file mode 100644
index b63f33cf5..000000000
--- a/components/form-model/index.jsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Form from './Form';
-
-export { FormProps, ValidationRule } from './Form';
-export { FormItemProps } from './FormItem';
-
-/* istanbul ignore next */
-Form.install = function(app) {
-  app.component(Form.name, Form);
-  app.component(Form.Item.name, Form.Item);
-};
-
-export default Form;
diff --git a/components/form-old/Form.jsx b/components/form-old/Form.jsx
new file mode 100755
index 000000000..22dd38637
--- /dev/null
+++ b/components/form-old/Form.jsx
@@ -0,0 +1,287 @@
+import PropTypes from '../_util/vue-types';
+import classNames from 'classnames';
+import { ColProps } from '../grid/Col';
+import Vue from 'vue';
+import isRegExp from 'lodash/isRegExp';
+import warning from '../_util/warning';
+import createDOMForm from '../vc-form/src/createDOMForm';
+import createFormField from '../vc-form/src/createFormField';
+import FormItem from './FormItem';
+import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
+import { initDefaultProps, getListeners } from '../_util/props-util';
+import { ConfigConsumerProps } from '../config-provider';
+
+export const FormCreateOption = {
+  onFieldsChange: PropTypes.func,
+  onValuesChange: PropTypes.func,
+  mapPropsToFields: PropTypes.func,
+  validateMessages: PropTypes.any,
+  withRef: PropTypes.bool,
+  name: PropTypes.string,
+};
+
+// function create
+export const WrappedFormUtils = {
+  /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
+  getFieldsValue: PropTypes.func,
+  /** 获取一个输入控件的值*/
+  getFieldValue: PropTypes.func,
+  /** 设置一组输入控件的值*/
+  setFieldsValue: PropTypes.func,
+  /** 设置一组输入控件的值*/
+  setFields: PropTypes.func,
+  /** 校验并获取一组输入域的值与 Error */
+  validateFields: PropTypes.func,
+  // validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
+  // validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
+  // validateFields(options: Object, callback: ValidateCallback): void;
+  // validateFields(callback: ValidateCallback): void;
+  // validateFields(): void;
+  /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
+  validateFieldsAndScroll: PropTypes.func,
+  // validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(callback?: ValidateCallback): void;
+  // validateFieldsAndScroll(): void;
+  /** 获取某个输入控件的 Error */
+  getFieldError: PropTypes.func,
+  getFieldsError: PropTypes.func,
+  /** 判断一个输入控件是否在校验状态*/
+  isFieldValidating: PropTypes.func,
+  isFieldTouched: PropTypes.func,
+  isFieldsTouched: PropTypes.func,
+  /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
+  resetFields: PropTypes.func,
+
+  getFieldDecorator: PropTypes.func,
+};
+
+export const FormProps = {
+  layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
+  labelCol: PropTypes.shape(ColProps).loose,
+  wrapperCol: PropTypes.shape(ColProps).loose,
+  colon: PropTypes.bool,
+  labelAlign: PropTypes.oneOf(['left', 'right']),
+  form: PropTypes.object,
+  // onSubmit: React.FormEventHandler<any>;
+  prefixCls: PropTypes.string,
+  hideRequiredMark: PropTypes.bool,
+  autoFormCreate: PropTypes.func,
+  options: PropTypes.object,
+  selfUpdate: PropTypes.bool,
+};
+
+export const ValidationRule = {
+  /** validation error message */
+  message: PropTypes.string,
+  /** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
+  type: PropTypes.string,
+  /** indicates whether field is required */
+  required: PropTypes.boolean,
+  /** treat required fields that only contain whitespace as errors */
+  whitespace: PropTypes.boolean,
+  /** validate the exact length of a field */
+  len: PropTypes.number,
+  /** validate the min length of a field */
+  min: PropTypes.number,
+  /** validate the max length of a field */
+  max: PropTypes.number,
+  /** validate the value from a list of possible values */
+  enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
+  /** validate from a regular expression */
+  pattern: PropTypes.custom(isRegExp),
+  /** transform a value before validation */
+  transform: PropTypes.func,
+  /** custom validate function (Note: callback must be called) */
+  validator: PropTypes.func,
+};
+
+// export type ValidateCallback = (errors: any, values: any) => void;
+
+// export type GetFieldDecoratorOptions = {
+//   /** 子节点的值的属性，如 Checkbox 的是 'checked' */
+//   valuePropName?: string;
+//   /** 子节点的初始值，类型、可选值均由子节点决定 */
+//   initialValue?: any;
+//   /** 收集子节点的值的时机 */
+//   trigger?: string;
+//   /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
+//   getValueFromEvent?: (...args: any[]) => any;
+//   /** Get the component props according to field value. */
+//   getValueProps?: (value: any) => any;
+//   /** 校验子节点值的时机 */
+//   validateTrigger?: string | string[];
+//   /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
+//   rules?: ValidationRule[];
+//   /** 是否和其他控件互斥，特别用于 Radio 单选控件 */
+//   exclusive?: boolean;
+//   /** Normalize value to form component */
+//   normalize?: (value: any, prevValue: any, allValues: any) => any;
+//   /** Whether stop validate on first rule of error for this field.  */
+//   validateFirst?: boolean;
+//   /** 是否一直保留子节点的信息 */
+//   preserve?: boolean;
+// };
+
+const Form = {
+  name: 'AForm',
+  props: initDefaultProps(FormProps, {
+    layout: 'horizontal',
+    hideRequiredMark: false,
+    colon: true,
+  }),
+  Item: FormItem,
+  createFormField,
+  create: (options = {}) => {
+    return createDOMForm({
+      fieldNameProp: 'id',
+      ...options,
+      fieldMetaProp: FIELD_META_PROP,
+      fieldDataProp: FIELD_DATA_PROP,
+    });
+  },
+  createForm(context, options = {}) {
+    const V = Vue;
+    return new V(Form.create({ ...options, templateContext: context })());
+  },
+  created() {
+    this.formItemContexts = new Map();
+  },
+  provide() {
+    return {
+      FormContext: this,
+      // https://github.com/vueComponent/ant-design-vue/issues/446
+      collectFormItemContext:
+        this.form && this.form.templateContext
+          ? (c, type = 'add') => {
+              const formItemContexts = this.formItemContexts;
+              const number = formItemContexts.get(c) || 0;
+              if (type === 'delete') {
+                if (number <= 1) {
+                  formItemContexts.delete(c);
+                } else {
+                  formItemContexts.set(c, number - 1);
+                }
+              } else {
+                if (c !== this.form.templateContext) {
+                  formItemContexts.set(c, number + 1);
+                }
+              }
+            }
+          : () => {},
+    };
+  },
+  inject: {
+    configProvider: { default: () => ConfigConsumerProps },
+  },
+  watch: {
+    form() {
+      this.$forceUpdate();
+    },
+  },
+  computed: {
+    vertical() {
+      return this.layout === 'vertical';
+    },
+  },
+  beforeUpdate() {
+    this.formItemContexts.forEach((number, c) => {
+      if (c.$forceUpdate) {
+        c.$forceUpdate();
+      }
+    });
+  },
+  updated() {
+    if (this.form && this.form.cleanUpUselessFields) {
+      this.form.cleanUpUselessFields();
+    }
+  },
+  methods: {
+    onSubmit(e) {
+      if (!getListeners(this).submit) {
+        e.preventDefault();
+      } else {
+        this.$emit('submit', e);
+      }
+    },
+  },
+
+  render() {
+    const {
+      prefixCls: customizePrefixCls,
+      hideRequiredMark,
+      layout,
+      onSubmit,
+      $slots,
+      autoFormCreate,
+      options = {},
+    } = this;
+    const getPrefixCls = this.configProvider.getPrefixCls;
+    const prefixCls = getPrefixCls('form', customizePrefixCls);
+
+    const formClassName = classNames(prefixCls, {
+      [`${prefixCls}-horizontal`]: layout === 'horizontal',
+      [`${prefixCls}-vertical`]: layout === 'vertical',
+      [`${prefixCls}-inline`]: layout === 'inline',
+      [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
+    });
+    if (autoFormCreate) {
+      warning(false, 'Form', '`autoFormCreate` is deprecated. please use `form` instead.');
+      const DomForm =
+        this.DomForm ||
+        createDOMForm({
+          fieldNameProp: 'id',
+          ...options,
+          fieldMetaProp: FIELD_META_PROP,
+          fieldDataProp: FIELD_DATA_PROP,
+          templateContext: this.$vnode.context,
+        })({
+          provide() {
+            return {
+              decoratorFormProps: this.$props,
+            };
+          },
+          data() {
+            return {
+              children: $slots.default,
+              formClassName,
+              submit: onSubmit,
+            };
+          },
+          created() {
+            autoFormCreate(this.form);
+          },
+          render() {
+            const { children, formClassName, submit } = this;
+            return (
+              <form onSubmit={submit} class={formClassName}>
+                {children}
+              </form>
+            );
+          },
+        });
+      if (this.domForm) {
+        this.domForm.children = $slots.default;
+        this.domForm.submit = onSubmit;
+        this.domForm.formClassName = formClassName;
+      }
+      this.DomForm = DomForm;
+
+      return (
+        <DomForm
+          wrappedComponentRef={inst => {
+            this.domForm = inst;
+          }}
+        />
+      );
+    }
+    return (
+      <form onSubmit={onSubmit} class={formClassName}>
+        {$slots.default}
+      </form>
+    );
+  },
+};
+
+export default Form;
diff --git a/components/form-old/FormItem.jsx b/components/form-old/FormItem.jsx
new file mode 100644
index 000000000..64744fb08
--- /dev/null
+++ b/components/form-old/FormItem.jsx
@@ -0,0 +1,520 @@
+import { provide, inject, Transition } from 'vue';
+import PropTypes from '../_util/vue-types';
+import classNames from 'classnames';
+import find from 'lodash/find';
+import Row from '../grid/Row';
+import Col, { ColProps } from '../grid/Col';
+import warning from '../_util/warning';
+import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
+import {
+  initDefaultProps,
+  getComponent,
+  getSlotOptions,
+  isValidElement,
+  getAllChildren,
+  findDOMNode,
+  getSlot,
+} from '../_util/props-util';
+import getTransitionProps from '../_util/getTransitionProps';
+import BaseMixin from '../_util/BaseMixin';
+import { cloneElement, cloneVNodes } from '../_util/vnode';
+import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
+import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
+import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
+import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
+import { ConfigConsumerProps } from '../config-provider';
+
+const iconMap = {
+  success: CheckCircleFilled,
+  warning: ExclamationCircleFilled,
+  error: CloseCircleFilled,
+  validating: LoadingOutlined,
+};
+
+function noop() {}
+
+function intersperseSpace(list) {
+  return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
+}
+export const FormItemProps = {
+  id: PropTypes.string,
+  htmlFor: PropTypes.string,
+  prefixCls: PropTypes.string,
+  label: PropTypes.any,
+  labelCol: PropTypes.shape(ColProps).loose,
+  wrapperCol: PropTypes.shape(ColProps).loose,
+  help: PropTypes.any,
+  extra: PropTypes.any,
+  validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
+  hasFeedback: PropTypes.bool,
+  required: PropTypes.bool,
+  colon: PropTypes.bool,
+  fieldDecoratorId: PropTypes.string,
+  fieldDecoratorOptions: PropTypes.object,
+  selfUpdate: PropTypes.bool,
+  labelAlign: PropTypes.oneOf(['left', 'right']),
+};
+function comeFromSlot(vnodes = [], itemVnode) {
+  let isSlot = false;
+  for (let i = 0, len = vnodes.length; i < len; i++) {
+    const vnode = vnodes[i];
+    if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
+      isSlot = true;
+    } else {
+      const componentOptions =
+        vnode.componentOptions || (vnode.$vnode && vnode.$vnode.componentOptions);
+      const children = componentOptions ? componentOptions.children : vnode.$children;
+      isSlot = comeFromSlot(children, itemVnode);
+    }
+    if (isSlot) {
+      break;
+    }
+  }
+  return isSlot;
+}
+
+export default {
+  name: 'AFormItem',
+  mixins: [BaseMixin],
+  inheritAttrs: false,
+  __ANT_FORM_ITEM: true,
+  props: initDefaultProps(FormItemProps, {
+    hasFeedback: false,
+  }),
+  setup() {
+    return {
+      isFormItemChildren: inject('isFormItemChildren', false),
+      FormContext: inject('FormContext', {}),
+      decoratorFormProps: inject('decoratorFormProps', {}),
+      collectFormItemContext: inject('collectFormItemContext', noop),
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
+  },
+  data() {
+    return { helpShow: false };
+  },
+  computed: {
+    itemSelfUpdate() {
+      return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate);
+    },
+  },
+  created() {
+    provide('isFormItemChildren', true);
+    this.collectContext();
+  },
+  beforeUpdate() {
+    if (process.env.NODE_ENV !== 'production') {
+      this.collectContext();
+    }
+  },
+  beforeUnmount() {
+    this.collectFormItemContext(this.$vnode && this.$vnode.context, 'delete');
+  },
+  mounted() {
+    const { help, validateStatus } = this.$props;
+    warning(
+      this.getControls(this.slotDefault, true).length <= 1 ||
+        help !== undefined ||
+        validateStatus !== undefined,
+      'Form.Item',
+      'Cannot generate `validateStatus` and `help` automatically, ' +
+        'while there are more than one `getFieldDecorator` in it.',
+    );
+    warning(
+      !this.fieldDecoratorId,
+      'Form.Item',
+      '`fieldDecoratorId` is deprecated. please use `v-decorator={id, options}` instead.',
+    );
+  },
+  methods: {
+    collectContext() {
+      if (this.FormContext.form && this.FormContext.form.templateContext) {
+        const { templateContext } = this.FormContext.form;
+        const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
+          return [...a, ...b];
+        }, []);
+        const isSlot = comeFromSlot(vnodes, this.$vnode);
+        warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
+        let isSlotScope = false;
+        // 进一步判断是否是通过slot-scope传递
+        if (!isSlot && this.$vnode.context !== templateContext) {
+          isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
+        }
+        if (!isSlotScope && !isSlot) {
+          this.collectFormItemContext(this.$vnode.context);
+        }
+      }
+    },
+    getHelpMessage() {
+      const help = getComponent(this, 'help');
+      const onlyControl = this.getOnlyControl();
+      if (help === undefined && onlyControl) {
+        const errors = this.getField().errors;
+        if (errors) {
+          return intersperseSpace(
+            errors.map((e, index) => {
+              let node = null;
+              if (isValidElement(e)) {
+                node = e;
+              } else if (isValidElement(e.message)) {
+                node = e.message;
+              }
+              return node ? cloneElement(node, { key: index }) : e.message;
+            }),
+          );
+        } else {
+          return '';
+        }
+      }
+
+      return help;
+    },
+
+    getControls(childrenArray = [], recursively) {
+      let controls = [];
+      for (let i = 0; i < childrenArray.length; i++) {
+        if (!recursively && controls.length > 0) {
+          break;
+        }
+
+        const child = childrenArray[i];
+        // if (!child.tag && child.text.trim() === '') {
+        //   continue;
+        // }
+
+        if (typeof child.type === 'object' && child.type.__ANT_FORM_ITEM) {
+          continue;
+        }
+        const children = getAllChildren(child);
+        const attrs = child.props || {};
+        if (FIELD_META_PROP in attrs) {
+          // And means FIELD_DATA_PROP in child.props, too.
+          controls.push(child);
+        } else if (children) {
+          controls = controls.concat(this.getControls(children, recursively));
+        }
+      }
+      return controls;
+    },
+
+    getOnlyControl() {
+      const child = this.getControls(this.slotDefault, false)[0];
+      return child !== undefined ? child : null;
+    },
+
+    getChildAttr(prop) {
+      const child = this.getOnlyControl();
+      let data = {};
+      if (!child) {
+        return undefined;
+      }
+      debugger;
+      if (child.data) {
+        data = child.data;
+      } else if (child.$vnode && child.$vnode.data) {
+        data = child.$vnode.data;
+      }
+      return data[prop] || data.attrs[prop];
+    },
+
+    getId() {
+      return this.getChildAttr('id');
+    },
+
+    getMeta() {
+      return this.getChildAttr(FIELD_META_PROP);
+    },
+
+    getField() {
+      return this.getChildAttr(FIELD_DATA_PROP);
+    },
+
+    getValidateStatus() {
+      const onlyControl = this.getOnlyControl();
+      if (!onlyControl) {
+        return '';
+      }
+      const field = this.getField();
+      if (field.validating) {
+        return 'validating';
+      }
+      if (field.errors) {
+        return 'error';
+      }
+      const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
+      if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
+        return 'success';
+      }
+      return '';
+    },
+
+    // Resolve duplicated ids bug between different forms
+    // https://github.com/ant-design/ant-design/issues/7351
+    onLabelClick() {
+      const id = this.id || this.getId();
+      if (!id) {
+        return;
+      }
+      const formItemNode = findDOMNode(this);
+      const control = formItemNode.querySelector(`[id="${id}"]`);
+      if (control && control.focus) {
+        control.focus();
+      }
+    },
+
+    onHelpAnimEnd(_key, helpShow) {
+      this.helpShow = helpShow;
+      if (!helpShow) {
+        this.$forceUpdate();
+      }
+    },
+
+    isRequired() {
+      const { required } = this;
+      if (required !== undefined) {
+        return required;
+      }
+      if (this.getOnlyControl()) {
+        const meta = this.getMeta() || {};
+        const validate = meta.validate || [];
+
+        return validate
+          .filter(item => !!item.rules)
+          .some(item => {
+            return item.rules.some(rule => rule.required);
+          });
+      }
+      return false;
+    },
+
+    renderHelp(prefixCls) {
+      const help = this.getHelpMessage();
+      const children = help ? (
+        <div class={`${prefixCls}-explain`} key="help">
+          {help}
+        </div>
+      ) : null;
+      if (children) {
+        this.helpShow = !!children;
+      }
+      const transitionProps = getTransitionProps('show-help', {
+        onAfterEnter: () => this.onHelpAnimEnd('help', true),
+        onAfterLeave: () => this.onHelpAnimEnd('help', false),
+      });
+      return (
+        <Transition {...transitionProps} key="help">
+          {children}
+        </Transition>
+      );
+    },
+
+    renderExtra(prefixCls) {
+      const extra = getComponent(this, 'extra');
+      return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
+    },
+
+    renderValidateWrapper(prefixCls, c1, c2, c3) {
+      const props = this.$props;
+      const onlyControl = this.getOnlyControl;
+      const validateStatus =
+        props.validateStatus === undefined && onlyControl
+          ? this.getValidateStatus()
+          : props.validateStatus;
+
+      let classes = `${prefixCls}-item-control`;
+      if (validateStatus) {
+        classes = classNames(`${prefixCls}-item-control`, {
+          'has-feedback': props.hasFeedback || validateStatus === 'validating',
+          'has-success': validateStatus === 'success',
+          'has-warning': validateStatus === 'warning',
+          'has-error': validateStatus === 'error',
+          'is-validating': validateStatus === 'validating',
+        });
+      }
+      const IconNode = validateStatus && iconMap[validateStatus];
+
+      const icon =
+        props.hasFeedback && IconNode ? (
+          <span class={`${prefixCls}-item-children-icon`}>
+            <IconNode />
+          </span>
+        ) : null;
+      return (
+        <div class={classes}>
+          <span class={`${prefixCls}-item-children`}>
+            {c1}
+            {icon}
+          </span>
+          {c2}
+          {c3}
+        </div>
+      );
+    },
+
+    renderWrapper(prefixCls, children) {
+      const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext;
+      const { wrapperCol } = this;
+      const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
+      const { style, id, ...restProps } = mergedWrapperCol;
+      const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class);
+      const colProps = {
+        ...restProps,
+        class: className,
+        key: 'wrapper',
+        style,
+        id,
+      };
+      return <Col {...colProps}>{children}</Col>;
+    },
+
+    renderLabel(prefixCls) {
+      const {
+        vertical,
+        labelAlign: contextLabelAlign,
+        labelCol: contextLabelCol,
+        colon: contextColon,
+      } = this.FormContext;
+      const { labelAlign, labelCol, colon, id, htmlFor } = this;
+      const label = getComponent(this, 'label');
+      const required = this.isRequired();
+      const mergedLabelCol = labelCol || contextLabelCol || {};
+
+      const mergedLabelAlign = labelAlign || contextLabelAlign;
+      const labelClsBasic = `${prefixCls}-item-label`;
+      const labelColClassName = classNames(
+        labelClsBasic,
+        mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
+        mergedLabelCol.class,
+      );
+      const {
+        class: labelColClass,
+        style: labelColStyle,
+        id: labelColId,
+        ...restProps
+      } = mergedLabelCol;
+      let labelChildren = label;
+      // Keep label is original where there should have no colon
+      const computedColon = colon === true || (contextColon !== false && colon !== false);
+      const haveColon = computedColon && !vertical;
+      // Remove duplicated user input colon
+      if (haveColon && typeof label === 'string' && label.trim() !== '') {
+        labelChildren = label.replace(/[：:]\s*$/, '');
+      }
+
+      const labelClassName = classNames({
+        [`${prefixCls}-item-required`]: required,
+        [`${prefixCls}-item-no-colon`]: !computedColon,
+      });
+      const colProps = {
+        ...restProps,
+        class: labelColClassName,
+        key: 'label',
+        style: labelColStyle,
+        id: labelColId,
+      };
+
+      return label ? (
+        <Col {...colProps}>
+          <label
+            for={htmlFor || id || this.getId()}
+            class={labelClassName}
+            title={typeof label === 'string' ? label : ''}
+            onClick={this.onLabelClick}
+          >
+            {labelChildren}
+          </label>
+        </Col>
+      ) : null;
+    },
+    renderChildren(prefixCls) {
+      return [
+        this.renderLabel(prefixCls),
+        this.renderWrapper(
+          prefixCls,
+          this.renderValidateWrapper(
+            prefixCls,
+            this.slotDefault,
+            this.renderHelp(prefixCls),
+            this.renderExtra(prefixCls),
+          ),
+        ),
+      ];
+    },
+    renderFormItem() {
+      const { prefixCls: customizePrefixCls } = this.$props;
+      const { class: className, ...restProps } = this.$attrs;
+      const getPrefixCls = this.configProvider.getPrefixCls;
+      const prefixCls = getPrefixCls('form', customizePrefixCls);
+      const children = this.renderChildren(prefixCls);
+      const itemClassName = {
+        [className]: true,
+        [`${prefixCls}-item`]: true,
+        [`${prefixCls}-item-with-help`]: this.helpShow,
+      };
+
+      return (
+        <Row class={classNames(itemClassName)} key="row" {...restProps}>
+          {children}
+        </Row>
+      );
+    },
+    decoratorOption(vnode) {
+      if (vnode.data && vnode.data.directives) {
+        const directive = find(vnode.data.directives, ['name', 'decorator']);
+        warning(
+          !directive || (directive && Array.isArray(directive.value)),
+          'Form',
+          `Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive
+            ? directive.value
+            : directive)}. At ${vnode.tag}.`,
+        );
+        return directive ? directive.value : null;
+      } else {
+        return null;
+      }
+    },
+    decoratorChildren(vnodes) {
+      const { FormContext } = this;
+      const getFieldDecorator = FormContext.form.getFieldDecorator;
+      for (let i = 0, len = vnodes.length; i < len; i++) {
+        const vnode = vnodes[i];
+        if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
+          break;
+        }
+        if (vnode.children) {
+          vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
+        } else if (vnode.componentOptions && vnode.componentOptions.children) {
+          vnode.componentOptions.children = this.decoratorChildren(
+            cloneVNodes(vnode.componentOptions.children),
+          );
+        }
+        const option = this.decoratorOption(vnode);
+        if (option && option[0]) {
+          vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
+        }
+      }
+      return vnodes;
+    },
+  },
+
+  render() {
+    const { decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}, FormContext } = this;
+    let child = getSlot(this);
+    if (decoratorFormProps.form && fieldDecoratorId && child.length) {
+      const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
+      child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
+      warning(
+        !(child.length > 1),
+        'Form',
+        '`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
+      );
+      this.slotDefault = child;
+    } else if (FormContext.form) {
+      child = cloneVNodes(child);
+      this.slotDefault = this.decoratorChildren(child);
+    } else {
+      this.slotDefault = child;
+    }
+    return this.renderFormItem();
+  },
+};
diff --git a/components/form-old/__tests__/__snapshots__/demo.test.js.snap b/components/form-old/__tests__/__snapshots__/demo.test.js.snap
new file mode 100644
index 000000000..97fd53963
--- /dev/null
+++ b/components/form-old/__tests__/__snapshots__/demo.test.js.snap
@@ -0,0 +1,849 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders ./antdv-demo/docs/form/demo/advanced-search.vue correctly 1`] = `
+<div id="components-form-demo-advanced-search">
+  <form class="ant-advanced-search-form ant-form ant-form-horizontal">
+    <div class="ant-row" style="margin-left: -12px; margin-right: -12px;">
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-1" title="Field 1" class="ant-form-item-required">Field 1</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-1" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-2" title="Field 2" class="ant-form-item-required">Field 2</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-2" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-3" title="Field 3" class="ant-form-item-required">Field 3</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-3" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-4" title="Field 4" class="ant-form-item-required">Field 4</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-4" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-5" title="Field 5" class="ant-form-item-required">Field 5</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-5" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-6" title="Field 6" class="ant-form-item-required">Field 6</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-6" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-7" title="Field 7" class="ant-form-item-required">Field 7</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-7" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-8" title="Field 8" class="ant-form-item-required">Field 8</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-8" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-9" title="Field 9" class="ant-form-item-required">Field 9</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-9" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
+        <div class="ant-row ant-form-item">
+          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-10" title="Field 10" class="ant-form-item-required">Field 10</label></div>
+          <div class="ant-col ant-form-item-control-wrapper">
+            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-10" class="ant-input"></span>
+              <!---->
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="ant-row">
+      <div class="ant-col ant-col-24" style="text-align: right;"><button type="submit" class="ant-btn ant-btn-primary"><span>Search</span></button> <button type="button" class="ant-btn" style="margin-left: 8px;"><span>Clear</span></button> <a style="margin-left: 8px; font-size: 12px;">
+          Collapse
+          <span role="img" aria-label="down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a></div>
+    </div>
+  </form>
+  <div class="search-result-list">
+    Search Result List
+  </div>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_note" title="Note" class="ant-form-item-required">Note</label></div>
+    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_note" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_gender" title="Gender" class="ant-form-item-required">Gender</label></div>
+    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    </div></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = `
+<form class="ant-form ant-form-inline">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-label"><label for="customized_form_controls_price" title="Price" class="">Price</label></div>
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="customized_form_controls_price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div tabindex="0" class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    </div></span></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>Add field</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/dynamic-rule.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_username" title="Name" class="ant-form-item-required">Name</label></div>
+    <div class="ant-col ant-col-8 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your name" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_username" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_nickname" title="Nickname" class="">Nickname</label></div>
+    <div class="ant-col ant-col-8 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your nickname" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_nickname" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+      Nickname is required
+    </span></label></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Check</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/form-in-modal.vue correctly 1`] = `
+<div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
+  <!---->
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/global-state.vue correctly 1`] = `
+<div id="components-form-demo-global-state">
+  <form class="ant-form ant-form-inline">
+    <div class="ant-row ant-form-item">
+      <div class="ant-col ant-form-item-label"><label for="global_state_username" title="Username" class="ant-form-item-required">Username</label></div>
+      <div class="ant-col ant-form-item-control-wrapper">
+        <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="global_state_username" class="ant-input"></span>
+          <!---->
+        </div>
+      </div>
+    </div>
+  </form> <pre class="language-bash">    {
+  "username": {
+    "value": "benjycui"
+  }
+}
+  </pre>
+</div>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`] = `
+<form class="ant-form ant-form-inline">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_userName" class="ant-input"></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_password" class="ant-input"></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
+        Horizontal
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
+        Vertical
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
+        Inline
+      </span></label></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Field A" class="">Field A</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Field B" class="">Field B</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/normal-login.vue correctly 1`] = `
+<form class="login-form ant-form ant-form-horizontal" id="components-form-demo-normal-login">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_userName" class="ant-input"></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_password" class="ant-input"></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+      Remember me
+    </span></label><a href="" class="login-form-forgot">
+          Forgot password
+        </a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
+        Or
+        <a href="">
+          register now!
+        </a></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_email" title="E-mail" class="ant-form-item-required">E-mail</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_email" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_password" title="Password" class="ant-form-item-required">Password</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_password" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_confirm" title="Confirm Password" class="ant-form-item-required">Confirm Password</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_confirm" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_nickname" title="" class="ant-form-item-required"><span>
+      Nickname&nbsp;
+      <span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span></label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_nickname" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_residence" title="Habitual Residence" class="ant-form-item-required">Habitual Residence</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" data-__meta="[object Object]" data-__field="[object Object]" id="register_residence" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div tabindex="0" class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="register_prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+          +86
+        </div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    </div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_phone" class="ant-input"></span></span></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+      </li>
+      </ul>
+    </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
+  </div>
+  </div></span>
+  <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_captcha" title="Captcha" class="ant-form-item-required">Captcha</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row" style="margin-left: -4px; margin-right: -4px;"><div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_captcha" class="ant-input"></div> <div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><button type="button" class="ant-btn"><span>Get captcha</span></button></div>
+    </div></span>
+    <!---->
+    <div class="ant-form-extra">We must make sure that your are a human.</div>
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="register_agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
+      I have read the
+      <a href="">
+        agreement
+      </a></span></label></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Register</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/time-related-controls.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-picker" title="DatePicker" class="ant-form-item-required">DatePicker</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-time-picker" title="DatePicker[showTime]" class="ant-form-item-required">DatePicker[showTime]</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-time-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_month-picker" title="MonthPicker" class="ant-form-item-required">MonthPicker</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_month-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-picker" title="RangePicker" class="ant-form-item-required">RangePicker</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-time-picker" title="RangePicker[showTime]" class="ant-form-item-required">RangePicker[showTime]</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" style="width: 350px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-time-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_time-picker" title="TimePicker" class="ant-form-item-required">TimePicker</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-time-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal" id="components-form-demo-validate-other">
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
+      China
+    </span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select" title="Select" class="ant-form-item-required">Select</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    </div></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
+      </li>
+    </div>
+  </div>
+  </div>
+  </div></span>
+  <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_input-number" title="InputNumber" class="">InputNumber</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
+    </div><span class="ant-form-text">
+      machines
+    </span></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_switch" title="Switch" class="">Switch</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_switch"><span class="ant-switch-inner"></span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_slider" title="Slider" class="">Slider</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-slider ant-slider-with-marks" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_slider"><div class="ant-slider-rail"></div><div class="ant-slider-track" style="left: 0%; width: 0%;"></div><div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 20%;"></span><span class="ant-slider-dot" style="left: 40%;"></span><span class="ant-slider-dot" style="left: 60%;"></span><span class="ant-slider-dot" style="left: 80%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
+      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%; transform: translateX(-50%);"></div>
+      <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;">A</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 20%;">B</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 40%;">C</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 60%;">D</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 80%;">E</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 100%;">F</span></div>
+    </div></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-group" title="Radio.Group" class="">Radio.Group</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-button" title="Radio.Button" class="">Radio.Button</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
+        item 1
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
+        item 2
+      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
+        item 3
+      </span></label></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
+            A
+          </span></label></div>
+      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
+            B
+          </span></label></div>
+      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
+            C
+          </span></label></div>
+      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
+            D
+          </span></label></div>
+      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
+            E
+          </span></label></div>
+    </div>
+  </div></span>
+  <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_rate" title="Rate" class="">Rate</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" role="radiogroup" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_rate"><li class="ant-rate-star ant-rate-star-full"><div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0"><div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+      <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+    </div>
+    </li>
+    <li class="ant-rate-star ant-rate-star-full">
+      <div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
+        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+      </div>
+    </li>
+    <li class="ant-rate-star ant-rate-star-full">
+      <div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
+        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+      </div>
+    </li>
+    <li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
+      <div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
+        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+      </div>
+    </li>
+    <li class="ant-rate-star ant-rate-star-zero">
+      <div role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0">
+        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
+      </div>
+    </li>
+    </ul></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_upload" title="Upload" class="">Upload</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
+        <!---->
+        <div class="ant-form-extra">longgggggggggggggggggggggggggggggggggg</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_dragger" title="Dragger" class="">Dragger</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="dropbox"><span data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_dragger" class=""><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/validate-static.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item ant-form-item-with-help">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error" class="ant-input"></span>
+        <div class="ant-form-explain show-help-enter">Should be combination of numbers &amp; alphabets</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item ant-form-item-with-help">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><input placeholder="I'm the content is being validated" type="text" id="validating" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
+        <div class="ant-form-explain show-help-enter">The information is being validated...</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><input placeholder="I'm the content" type="text" id="success" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item ant-form-item-with-help">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
+        <div class="ant-form-explain show-help-enter">Should be combination of numbers &amp; alphabets</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-time-picker" style="width: 100%;"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
+        Option 1
+      </div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    </div><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item ant-form-item-with-help">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label"></span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
+        <div class="ant-form-explain show-help-enter">The information is being validated...</div>
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item" style="margin-bottom: 0px;">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-col ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <div class="ant-form-explain show-help-enter">Please select the correct date</div>
+    </div>
+  </div>
+  </div><span style="display: inline-block; width: 24px; text-align: center;">
+      -
+    </span>
+  <div class="ant-row ant-form-item" style="display: inline-block;">
+    <div class="ant-col ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
+    </div>
+  </div>
+  </div></span>
+  <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
+    </div><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
+    <!---->
+  </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><input placeholder="with allowClear" type="text" class="ant-input"><span class="ant-input-suffix"></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
+    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password and allowClear" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`renders ./antdv-demo/docs/form/demo/without-form-create.vue correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
+  <div class="ant-row ant-form-item ant-form-item-with-help">
+    <div class="ant-col ant-col-7 ant-form-item-label"><label title="Prime between 8 &amp; 12" class="">Prime between 8 &amp; 12</label></div>
+    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
+    </div></span>
+    <div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>
+  </div>
+  </div>
+  </div>
+</form>
+`;
diff --git a/components/form/__tests__/__snapshots__/index.test.js.snap b/components/form-old/__tests__/__snapshots__/index.test.js.snap
similarity index 100%
rename from components/form/__tests__/__snapshots__/index.test.js.snap
rename to components/form-old/__tests__/__snapshots__/index.test.js.snap
diff --git a/components/form/__tests__/__snapshots__/message.test.js.snap b/components/form-old/__tests__/__snapshots__/message.test.js.snap
similarity index 100%
rename from components/form/__tests__/__snapshots__/message.test.js.snap
rename to components/form-old/__tests__/__snapshots__/message.test.js.snap
diff --git a/components/form-old/__tests__/demo.test.js b/components/form-old/__tests__/demo.test.js
new file mode 100644
index 000000000..e5338b89c
--- /dev/null
+++ b/components/form-old/__tests__/demo.test.js
@@ -0,0 +1,3 @@
+import demoTest from '../../../tests/shared/demoTest';
+
+demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
diff --git a/components/form/__tests__/index.test.js b/components/form-old/__tests__/index.test.js
similarity index 100%
rename from components/form/__tests__/index.test.js
rename to components/form-old/__tests__/index.test.js
diff --git a/components/form/__tests__/label.test.js b/components/form-old/__tests__/label.test.js
similarity index 100%
rename from components/form/__tests__/label.test.js
rename to components/form-old/__tests__/label.test.js
diff --git a/components/form/__tests__/message.test.js b/components/form-old/__tests__/message.test.js
similarity index 100%
rename from components/form/__tests__/message.test.js
rename to components/form-old/__tests__/message.test.js
diff --git a/components/form/constants.jsx b/components/form-old/constants.jsx
similarity index 100%
rename from components/form/constants.jsx
rename to components/form-old/constants.jsx
diff --git a/components/form-old/index.jsx b/components/form-old/index.jsx
new file mode 100644
index 000000000..b5c0b1602
--- /dev/null
+++ b/components/form-old/index.jsx
@@ -0,0 +1,20 @@
+import Vue from 'vue';
+import Form from './Form';
+import ref from 'vue-ref';
+import FormDecoratorDirective from '../_util/FormDecoratorDirective';
+
+Vue.use(ref, { name: 'ant-ref' });
+Vue.use(FormDecoratorDirective);
+Vue.prototype.$form = Form;
+
+export { FormProps, FormCreateOption, ValidationRule } from './Form';
+export { FormItemProps } from './FormItem';
+
+/* istanbul ignore next */
+Form.install = function(Vue) {
+  Vue.component(Form.name, Form);
+  Vue.component(Form.Item.name, Form.Item);
+  Vue.prototype.$form = Form;
+};
+
+export default Form;
diff --git a/components/form-model/style/index.js b/components/form-old/style/index.js
similarity index 100%
rename from components/form-model/style/index.js
rename to components/form-old/style/index.js
diff --git a/components/form-model/style/index.less b/components/form-old/style/index.less
similarity index 100%
rename from components/form-model/style/index.less
rename to components/form-old/style/index.less
diff --git a/components/form-model/style/mixin.less b/components/form-old/style/mixin.less
similarity index 100%
rename from components/form-model/style/mixin.less
rename to components/form-old/style/mixin.less
diff --git a/components/form/Form.jsx b/components/form/Form.jsx
index 22dd38637..d98a441bd 100755
--- a/components/form/Form.jsx
+++ b/components/form/Form.jsx
@@ -1,61 +1,18 @@
+import { inject, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
 import { ColProps } from '../grid/Col';
-import Vue from 'vue';
 import isRegExp from 'lodash/isRegExp';
 import warning from '../_util/warning';
-import createDOMForm from '../vc-form/src/createDOMForm';
-import createFormField from '../vc-form/src/createFormField';
 import FormItem from './FormItem';
-import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
-import { initDefaultProps, getListeners } from '../_util/props-util';
+import { initDefaultProps, getSlot } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-
-export const FormCreateOption = {
-  onFieldsChange: PropTypes.func,
-  onValuesChange: PropTypes.func,
-  mapPropsToFields: PropTypes.func,
-  validateMessages: PropTypes.any,
-  withRef: PropTypes.bool,
-  name: PropTypes.string,
-};
-
-// function create
-export const WrappedFormUtils = {
-  /** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
-  getFieldsValue: PropTypes.func,
-  /** 获取一个输入控件的值*/
-  getFieldValue: PropTypes.func,
-  /** 设置一组输入控件的值*/
-  setFieldsValue: PropTypes.func,
-  /** 设置一组输入控件的值*/
-  setFields: PropTypes.func,
-  /** 校验并获取一组输入域的值与 Error */
-  validateFields: PropTypes.func,
-  // validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
-  // validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
-  // validateFields(options: Object, callback: ValidateCallback): void;
-  // validateFields(callback: ValidateCallback): void;
-  // validateFields(): void;
-  /** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
-  validateFieldsAndScroll: PropTypes.func,
-  // validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
-  // validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
-  // validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
-  // validateFieldsAndScroll(callback?: ValidateCallback): void;
-  // validateFieldsAndScroll(): void;
-  /** 获取某个输入控件的 Error */
-  getFieldError: PropTypes.func,
-  getFieldsError: PropTypes.func,
-  /** 判断一个输入控件是否在校验状态*/
-  isFieldValidating: PropTypes.func,
-  isFieldTouched: PropTypes.func,
-  isFieldsTouched: PropTypes.func,
-  /** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
-  resetFields: PropTypes.func,
-
-  getFieldDecorator: PropTypes.func,
-};
+import { getNamePath, containsNamePath } from './utils/valueUtil';
+import { defaultValidateMessages } from './utils/messages';
+import { allPromiseFinish } from './utils/asyncUtil';
+import { toArray } from './utils/typeUtil';
+import isEqual from 'lodash/isEqual';
+import scrollIntoView from 'scroll-into-view-if-needed';
 
 export const FormProps = {
   layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
@@ -63,13 +20,17 @@ export const FormProps = {
   wrapperCol: PropTypes.shape(ColProps).loose,
   colon: PropTypes.bool,
   labelAlign: PropTypes.oneOf(['left', 'right']),
-  form: PropTypes.object,
-  // onSubmit: React.FormEventHandler<any>;
   prefixCls: PropTypes.string,
   hideRequiredMark: PropTypes.bool,
-  autoFormCreate: PropTypes.func,
-  options: PropTypes.object,
-  selfUpdate: PropTypes.bool,
+  model: PropTypes.object,
+  rules: PropTypes.object,
+  validateMessages: PropTypes.any,
+  validateOnRuleChange: PropTypes.bool,
+  // 提交失败自动滚动到第一个错误字段
+  scrollToFirstError: PropTypes.bool,
+  onFinish: PropTypes.func,
+  onFinishFailed: PropTypes.func,
+  name: PropTypes.name,
 };
 
 export const ValidationRule = {
@@ -97,87 +58,35 @@ export const ValidationRule = {
   validator: PropTypes.func,
 };
 
-// export type ValidateCallback = (errors: any, values: any) => void;
-
-// export type GetFieldDecoratorOptions = {
-//   /** 子节点的值的属性，如 Checkbox 的是 'checked' */
-//   valuePropName?: string;
-//   /** 子节点的初始值，类型、可选值均由子节点决定 */
-//   initialValue?: any;
-//   /** 收集子节点的值的时机 */
-//   trigger?: string;
-//   /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
-//   getValueFromEvent?: (...args: any[]) => any;
-//   /** Get the component props according to field value. */
-//   getValueProps?: (value: any) => any;
-//   /** 校验子节点值的时机 */
-//   validateTrigger?: string | string[];
-//   /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
-//   rules?: ValidationRule[];
-//   /** 是否和其他控件互斥，特别用于 Radio 单选控件 */
-//   exclusive?: boolean;
-//   /** Normalize value to form component */
-//   normalize?: (value: any, prevValue: any, allValues: any) => any;
-//   /** Whether stop validate on first rule of error for this field.  */
-//   validateFirst?: boolean;
-//   /** 是否一直保留子节点的信息 */
-//   preserve?: boolean;
-// };
+function isEqualName(name1, name2) {
+  return isEqual(toArray(name1), toArray(name2));
+}
 
 const Form = {
   name: 'AForm',
+  inheritAttrs: false,
   props: initDefaultProps(FormProps, {
     layout: 'horizontal',
     hideRequiredMark: false,
     colon: true,
   }),
   Item: FormItem,
-  createFormField,
-  create: (options = {}) => {
-    return createDOMForm({
-      fieldNameProp: 'id',
-      ...options,
-      fieldMetaProp: FIELD_META_PROP,
-      fieldDataProp: FIELD_DATA_PROP,
-    });
-  },
-  createForm(context, options = {}) {
-    const V = Vue;
-    return new V(Form.create({ ...options, templateContext: context })());
-  },
   created() {
-    this.formItemContexts = new Map();
+    this.fields = [];
+    this.form = undefined;
+    this.lastValidatePromise = null;
+    provide('FormContext', this);
   },
-  provide() {
+  setup() {
     return {
-      FormContext: this,
-      // https://github.com/vueComponent/ant-design-vue/issues/446
-      collectFormItemContext:
-        this.form && this.form.templateContext
-          ? (c, type = 'add') => {
-              const formItemContexts = this.formItemContexts;
-              const number = formItemContexts.get(c) || 0;
-              if (type === 'delete') {
-                if (number <= 1) {
-                  formItemContexts.delete(c);
-                } else {
-                  formItemContexts.set(c, number - 1);
-                }
-              } else {
-                if (c !== this.form.templateContext) {
-                  formItemContexts.set(c, number + 1);
-                }
-              }
-            }
-          : () => {},
+      configProvider: inject('configProvider', ConfigConsumerProps),
     };
   },
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
-  },
   watch: {
-    form() {
-      this.$forceUpdate();
+    rules() {
+      if (this.validateOnRuleChange) {
+        this.validateFields();
+      }
     },
   },
   computed: {
@@ -185,100 +94,186 @@ const Form = {
       return this.layout === 'vertical';
     },
   },
-  beforeUpdate() {
-    this.formItemContexts.forEach((number, c) => {
-      if (c.$forceUpdate) {
-        c.$forceUpdate();
-      }
-    });
-  },
-  updated() {
-    if (this.form && this.form.cleanUpUselessFields) {
-      this.form.cleanUpUselessFields();
-    }
-  },
   methods: {
-    onSubmit(e) {
-      if (!getListeners(this).submit) {
-        e.preventDefault();
-      } else {
-        this.$emit('submit', e);
+    addField(field) {
+      if (field) {
+        this.fields.push(field);
       }
     },
+    removeField(field) {
+      if (field.fieldName) {
+        this.fields.splice(this.fields.indexOf(field), 1);
+      }
+    },
+    handleSubmit(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      this.$emit('submit', e);
+      const res = this.validateFields();
+      res
+        .then(values => {
+          this.$emit('finish', values);
+        })
+        .catch(errors => {
+          this.handleFinishFailed(errors);
+        });
+    },
+    getFieldsByNameList(nameList) {
+      const provideNameList = !!nameList;
+      const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
+      if (!provideNameList) {
+        return this.fields;
+      } else {
+        return this.fields.filter(
+          field => namePathList.findIndex(namePath => isEqualName(namePath, field.fieldName)) > -1,
+        );
+      }
+    },
+    resetFields(name) {
+      if (!this.model) {
+        warning(false, 'Form', 'model is required for resetFields to work.');
+        return;
+      }
+      this.getFieldsByNameList(name).forEach(field => {
+        field.resetField();
+      });
+    },
+    clearValidate(name) {
+      this.getFieldsByNameList(name).forEach(field => {
+        field.clearValidate();
+      });
+    },
+    handleFinishFailed(errorInfo) {
+      const { scrollToFirstError } = this;
+      this.$emit('finishFailed', errorInfo);
+      if (scrollToFirstError && errorInfo.errorFields.length) {
+        this.scrollToField(errorInfo.errorFields[0].name);
+      }
+    },
+    validate() {
+      return this.validateField(...arguments);
+    },
+    scrollToField(name, options = {}) {
+      const fields = this.getFieldsByNameList([name]);
+      if (fields.length) {
+        const fieldId = fields[0].fieldId;
+        const node = fieldId ? document.getElementById(fieldId) : null;
+
+        if (node) {
+          scrollIntoView(node, {
+            scrollMode: 'if-needed',
+            block: 'nearest',
+            ...options,
+          });
+        }
+      }
+    },
+    // eslint-disable-next-line no-unused-vars
+    getFieldsValue(nameList = true) {
+      const values = {};
+      this.fields.forEach(({ fieldName, fieldValue }) => {
+        values[fieldName] = fieldValue;
+      });
+      if (nameList === true) {
+        return values;
+      } else {
+        const res = {};
+        toArray(nameList).forEach(namePath => (res[namePath] = values[namePath]));
+        return res;
+      }
+    },
+    validateFields(nameList, options) {
+      if (!this.model) {
+        warning(false, 'Form', 'model is required for validateFields to work.');
+        return;
+      }
+      const provideNameList = !!nameList;
+      const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
+
+      // Collect result in promise list
+      const promiseList = [];
+
+      this.fields.forEach(field => {
+        // Add field if not provide `nameList`
+        if (!provideNameList) {
+          namePathList.push(field.getNamePath());
+        }
+
+        // Skip if without rule
+        if (!field.getRules().length) {
+          return;
+        }
+
+        const fieldNamePath = field.getNamePath();
+
+        // Add field validate rule in to promise list
+        if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
+          const promise = field.validateRules({
+            validateMessages: {
+              ...defaultValidateMessages,
+              ...this.validateMessages,
+            },
+            ...options,
+          });
+
+          // Wrap promise with field
+          promiseList.push(
+            promise
+              .then(() => ({ name: fieldNamePath, errors: [] }))
+              .catch(errors =>
+                Promise.reject({
+                  name: fieldNamePath,
+                  errors,
+                }),
+              ),
+          );
+        }
+      });
+
+      const summaryPromise = allPromiseFinish(promiseList);
+      this.lastValidatePromise = summaryPromise;
+
+      const returnPromise = summaryPromise
+        .then(() => {
+          if (this.lastValidatePromise === summaryPromise) {
+            return Promise.resolve(this.getFieldsValue(namePathList));
+          }
+          return Promise.reject([]);
+        })
+        .catch(results => {
+          const errorList = results.filter(result => result && result.errors.length);
+          return Promise.reject({
+            values: this.getFieldsValue(namePathList),
+            errorFields: errorList,
+            outOfDate: this.lastValidatePromise !== summaryPromise,
+          });
+        });
+
+      // Do not throw in console
+      returnPromise.catch(e => e);
+
+      return returnPromise;
+    },
+    validateField() {
+      return this.validateFields(...arguments);
+    },
   },
 
   render() {
-    const {
-      prefixCls: customizePrefixCls,
-      hideRequiredMark,
-      layout,
-      onSubmit,
-      $slots,
-      autoFormCreate,
-      options = {},
-    } = this;
+    const { prefixCls: customizePrefixCls, hideRequiredMark, layout, handleSubmit } = this;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('form', customizePrefixCls);
+    const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
 
-    const formClassName = classNames(prefixCls, {
+    const formClassName = classNames(prefixCls, className, {
       [`${prefixCls}-horizontal`]: layout === 'horizontal',
       [`${prefixCls}-vertical`]: layout === 'vertical',
       [`${prefixCls}-inline`]: layout === 'inline',
       [`${prefixCls}-hide-required-mark`]: hideRequiredMark,
     });
-    if (autoFormCreate) {
-      warning(false, 'Form', '`autoFormCreate` is deprecated. please use `form` instead.');
-      const DomForm =
-        this.DomForm ||
-        createDOMForm({
-          fieldNameProp: 'id',
-          ...options,
-          fieldMetaProp: FIELD_META_PROP,
-          fieldDataProp: FIELD_DATA_PROP,
-          templateContext: this.$vnode.context,
-        })({
-          provide() {
-            return {
-              decoratorFormProps: this.$props,
-            };
-          },
-          data() {
-            return {
-              children: $slots.default,
-              formClassName,
-              submit: onSubmit,
-            };
-          },
-          created() {
-            autoFormCreate(this.form);
-          },
-          render() {
-            const { children, formClassName, submit } = this;
-            return (
-              <form onSubmit={submit} class={formClassName}>
-                {children}
-              </form>
-            );
-          },
-        });
-      if (this.domForm) {
-        this.domForm.children = $slots.default;
-        this.domForm.submit = onSubmit;
-        this.domForm.formClassName = formClassName;
-      }
-      this.DomForm = DomForm;
-
-      return (
-        <DomForm
-          wrappedComponentRef={inst => {
-            this.domForm = inst;
-          }}
-        />
-      );
-    }
     return (
-      <form onSubmit={onSubmit} class={formClassName}>
-        {$slots.default}
+      <form onSubmit={handleSubmit} class={formClassName} {...restProps}>
+        {getSlot(this)}
       </form>
     );
   },
diff --git a/components/form/FormItem.jsx b/components/form/FormItem.jsx
index 64744fb08..c938d64c0 100644
--- a/components/form/FormItem.jsx
+++ b/components/form/FormItem.jsx
@@ -1,28 +1,30 @@
-import { provide, inject, Transition } from 'vue';
+import { inject, provide, Transition } from 'vue';
+import cloneDeep from 'lodash/cloneDeep';
 import PropTypes from '../_util/vue-types';
 import classNames from 'classnames';
-import find from 'lodash/find';
+import getTransitionProps from '../_util/getTransitionProps';
 import Row from '../grid/Row';
 import Col, { ColProps } from '../grid/Col';
-import warning from '../_util/warning';
-import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
-import {
+import hasProp, {
   initDefaultProps,
-  getComponent,
-  getSlotOptions,
-  isValidElement,
-  getAllChildren,
   findDOMNode,
+  getComponent,
+  getOptionProps,
+  getEvents,
+  isValidElement,
   getSlot,
 } from '../_util/props-util';
-import getTransitionProps from '../_util/getTransitionProps';
 import BaseMixin from '../_util/BaseMixin';
-import { cloneElement, cloneVNodes } from '../_util/vnode';
+import { ConfigConsumerProps } from '../config-provider';
+import { cloneElement } from '../_util/vnode';
 import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
 import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
 import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
 import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
-import { ConfigConsumerProps } from '../config-provider';
+import { validateRules } from './utils/validateUtil';
+import { getNamePath } from './utils/valueUtil';
+import { toArray } from './utils/typeUtil';
+import { warning } from '../vc-util/warning';
 
 const iconMap = {
   success: CheckCircleFilled,
@@ -31,227 +33,256 @@ const iconMap = {
   validating: LoadingOutlined,
 };
 
-function noop() {}
+function getPropByPath(obj, namePathList, strict) {
+  let tempObj = obj;
 
-function intersperseSpace(list) {
-  return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
+  const keyArr = namePathList;
+  let i = 0;
+  try {
+    for (let len = keyArr.length; i < len - 1; ++i) {
+      if (!tempObj && !strict) break;
+      let key = keyArr[i];
+      if (key in tempObj) {
+        tempObj = tempObj[key];
+      } else {
+        if (strict) {
+          throw Error('please transfer a valid name path to form item!');
+        }
+        break;
+      }
+    }
+    if (strict && !tempObj) {
+      throw Error('please transfer a valid name path to form item!');
+    }
+  } catch (error) {
+    console.error('please transfer a valid name path to form item!');
+  }
+
+  return {
+    o: tempObj,
+    k: keyArr[i],
+    v: tempObj ? tempObj[keyArr[i]] : undefined,
+  };
 }
 export const FormItemProps = {
   id: PropTypes.string,
   htmlFor: PropTypes.string,
   prefixCls: PropTypes.string,
   label: PropTypes.any,
-  labelCol: PropTypes.shape(ColProps).loose,
-  wrapperCol: PropTypes.shape(ColProps).loose,
   help: PropTypes.any,
   extra: PropTypes.any,
-  validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
+  labelCol: PropTypes.shape(ColProps).loose,
+  wrapperCol: PropTypes.shape(ColProps).loose,
   hasFeedback: PropTypes.bool,
-  required: PropTypes.bool,
   colon: PropTypes.bool,
-  fieldDecoratorId: PropTypes.string,
-  fieldDecoratorOptions: PropTypes.object,
-  selfUpdate: PropTypes.bool,
   labelAlign: PropTypes.oneOf(['left', 'right']),
+  prop: PropTypes.oneOfType([Array, String, Number]),
+  name: PropTypes.oneOfType([Array, String, Number]),
+  rules: PropTypes.oneOfType([Array, Object]),
+  autoLink: PropTypes.bool,
+  required: PropTypes.bool,
+  validateFirst: PropTypes.bool,
+  validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
 };
-function comeFromSlot(vnodes = [], itemVnode) {
-  let isSlot = false;
-  for (let i = 0, len = vnodes.length; i < len; i++) {
-    const vnode = vnodes[i];
-    if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
-      isSlot = true;
-    } else {
-      const componentOptions =
-        vnode.componentOptions || (vnode.$vnode && vnode.$vnode.componentOptions);
-      const children = componentOptions ? componentOptions.children : vnode.$children;
-      isSlot = comeFromSlot(children, itemVnode);
-    }
-    if (isSlot) {
-      break;
-    }
-  }
-  return isSlot;
-}
 
 export default {
   name: 'AFormItem',
   mixins: [BaseMixin],
   inheritAttrs: false,
-  __ANT_FORM_ITEM: true,
+  __ANT_NEW_FORM_ITEM: true,
   props: initDefaultProps(FormItemProps, {
     hasFeedback: false,
+    autoLink: true,
   }),
   setup() {
     return {
       isFormItemChildren: inject('isFormItemChildren', false),
-      FormContext: inject('FormContext', {}),
-      decoratorFormProps: inject('decoratorFormProps', {}),
-      collectFormItemContext: inject('collectFormItemContext', noop),
       configProvider: inject('configProvider', ConfigConsumerProps),
+      FormContext: inject('FormContext', {}),
     };
   },
   data() {
-    return { helpShow: false };
+    warning(!hasProp(this, 'prop'), `\`prop\` is deprecated. Please use \`name\` instead.`);
+    return {
+      validateState: this.validateStatus,
+      validateMessage: '',
+      validateDisabled: false,
+      validator: {},
+      helpShow: false,
+      errors: [],
+    };
   },
+
   computed: {
-    itemSelfUpdate() {
-      return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate);
+    fieldName() {
+      return this.name || this.prop;
+    },
+    namePath() {
+      return getNamePath(this.fieldName);
+    },
+    fieldId() {
+      if (this.id) {
+        return this.id;
+      } else if (!this.namePath.length) {
+        return undefined;
+      } else {
+        const formName = this.FormContext.name;
+        const mergedId = this.namePath.join('_');
+        return formName ? `${formName}_${mergedId}` : mergedId;
+      }
+    },
+    fieldValue() {
+      const model = this.FormContext.model;
+      if (!model || !this.fieldName) {
+        return;
+      }
+      return getPropByPath(model, this.namePath, true).v;
+    },
+    isRequired() {
+      let rules = this.getRules();
+      let isRequired = false;
+      if (rules && rules.length) {
+        rules.every(rule => {
+          if (rule.required) {
+            isRequired = true;
+            return false;
+          }
+          return true;
+        });
+      }
+      return isRequired || this.required;
+    },
+  },
+  watch: {
+    validateStatus(val) {
+      this.validateState = val;
     },
   },
   created() {
     provide('isFormItemChildren', true);
-    this.collectContext();
   },
-  beforeUpdate() {
-    if (process.env.NODE_ENV !== 'production') {
-      this.collectContext();
+  mounted() {
+    if (this.fieldName) {
+      const { addField } = this.FormContext;
+      addField && addField(this);
+      this.initialValue = cloneDeep(this.fieldValue);
     }
   },
   beforeUnmount() {
-    this.collectFormItemContext(this.$vnode && this.$vnode.context, 'delete');
-  },
-  mounted() {
-    const { help, validateStatus } = this.$props;
-    warning(
-      this.getControls(this.slotDefault, true).length <= 1 ||
-        help !== undefined ||
-        validateStatus !== undefined,
-      'Form.Item',
-      'Cannot generate `validateStatus` and `help` automatically, ' +
-        'while there are more than one `getFieldDecorator` in it.',
-    );
-    warning(
-      !this.fieldDecoratorId,
-      'Form.Item',
-      '`fieldDecoratorId` is deprecated. please use `v-decorator={id, options}` instead.',
-    );
+    const { removeField } = this.FormContext;
+    removeField && removeField(this);
   },
   methods: {
-    collectContext() {
-      if (this.FormContext.form && this.FormContext.form.templateContext) {
-        const { templateContext } = this.FormContext.form;
-        const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
-          return [...a, ...b];
-        }, []);
-        const isSlot = comeFromSlot(vnodes, this.$vnode);
-        warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
-        let isSlotScope = false;
-        // 进一步判断是否是通过slot-scope传递
-        if (!isSlot && this.$vnode.context !== templateContext) {
-          isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
-        }
-        if (!isSlotScope && !isSlot) {
-          this.collectFormItemContext(this.$vnode.context);
-        }
+    getNamePath() {
+      const { fieldName } = this;
+      const { prefixName = [] } = this.FormContext;
+
+      return fieldName !== undefined ? [...prefixName, ...this.namePath] : [];
+    },
+    validateRules(options) {
+      const { validateFirst = false, messageVariables } = this.$props;
+      const { triggerName } = options || {};
+      const namePath = this.getNamePath();
+
+      let filteredRules = this.getRules();
+      if (triggerName) {
+        filteredRules = filteredRules.filter(rule => {
+          const { trigger } = rule;
+          if (!trigger) {
+            return true;
+          }
+          const triggerList = toArray(trigger);
+          return triggerList.includes(triggerName);
+        });
       }
+      if (!filteredRules.length) {
+        return Promise.resolve();
+      }
+      const promise = validateRules(
+        namePath,
+        this.fieldValue,
+        filteredRules,
+        options,
+        validateFirst,
+        messageVariables,
+      );
+      this.validateState = 'validating';
+      this.errors = [];
+
+      promise
+        .catch(e => e)
+        .then((errors = []) => {
+          if (this.validateState === 'validating') {
+            this.validateState = errors.length ? 'error' : 'success';
+            this.validateMessage = errors[0];
+            this.errors = errors;
+          }
+        });
+
+      return promise;
+    },
+    getRules() {
+      let formRules = this.FormContext.rules;
+      const selfRules = this.rules;
+      const requiredRule =
+        this.required !== undefined ? { required: !!this.required, trigger: 'change' } : [];
+      const prop = getPropByPath(formRules, this.namePath);
+      formRules = formRules ? prop.o[prop.k] || prop.v : [];
+      return [].concat(selfRules || formRules || []).concat(requiredRule);
+    },
+    getFilteredRule(trigger) {
+      const rules = this.getRules();
+      return rules
+        .filter(rule => {
+          if (!rule.trigger || trigger === '') return true;
+          if (Array.isArray(rule.trigger)) {
+            return rule.trigger.indexOf(trigger) > -1;
+          } else {
+            return rule.trigger === trigger;
+          }
+        })
+        .map(rule => ({ ...rule }));
+    },
+    onFieldBlur() {
+      this.validateRules({ triggerName: 'blur' });
+    },
+    onFieldChange() {
+      if (this.validateDisabled) {
+        this.validateDisabled = false;
+        return;
+      }
+      this.validateRules({ triggerName: 'change' });
+    },
+    clearValidate() {
+      this.validateState = '';
+      this.validateMessage = '';
+      this.validateDisabled = false;
+    },
+    resetField() {
+      this.validateState = '';
+      this.validateMessage = '';
+      const model = this.FormContext.model || {};
+      const value = this.fieldValue;
+      const prop = getPropByPath(model, this.namePath, true);
+      this.validateDisabled = true;
+      if (Array.isArray(value)) {
+        prop.o[prop.k] = [].concat(this.initialValue);
+      } else {
+        prop.o[prop.k] = this.initialValue;
+      }
+      // reset validateDisabled after onFieldChange triggered
+      this.$nextTick(() => {
+        this.validateDisabled = false;
+      });
     },
     getHelpMessage() {
       const help = getComponent(this, 'help');
-      const onlyControl = this.getOnlyControl();
-      if (help === undefined && onlyControl) {
-        const errors = this.getField().errors;
-        if (errors) {
-          return intersperseSpace(
-            errors.map((e, index) => {
-              let node = null;
-              if (isValidElement(e)) {
-                node = e;
-              } else if (isValidElement(e.message)) {
-                node = e.message;
-              }
-              return node ? cloneElement(node, { key: index }) : e.message;
-            }),
-          );
-        } else {
-          return '';
-        }
-      }
 
-      return help;
+      return this.validateMessage || help;
     },
 
-    getControls(childrenArray = [], recursively) {
-      let controls = [];
-      for (let i = 0; i < childrenArray.length; i++) {
-        if (!recursively && controls.length > 0) {
-          break;
-        }
-
-        const child = childrenArray[i];
-        // if (!child.tag && child.text.trim() === '') {
-        //   continue;
-        // }
-
-        if (typeof child.type === 'object' && child.type.__ANT_FORM_ITEM) {
-          continue;
-        }
-        const children = getAllChildren(child);
-        const attrs = child.props || {};
-        if (FIELD_META_PROP in attrs) {
-          // And means FIELD_DATA_PROP in child.props, too.
-          controls.push(child);
-        } else if (children) {
-          controls = controls.concat(this.getControls(children, recursively));
-        }
-      }
-      return controls;
-    },
-
-    getOnlyControl() {
-      const child = this.getControls(this.slotDefault, false)[0];
-      return child !== undefined ? child : null;
-    },
-
-    getChildAttr(prop) {
-      const child = this.getOnlyControl();
-      let data = {};
-      if (!child) {
-        return undefined;
-      }
-      debugger;
-      if (child.data) {
-        data = child.data;
-      } else if (child.$vnode && child.$vnode.data) {
-        data = child.$vnode.data;
-      }
-      return data[prop] || data.attrs[prop];
-    },
-
-    getId() {
-      return this.getChildAttr('id');
-    },
-
-    getMeta() {
-      return this.getChildAttr(FIELD_META_PROP);
-    },
-
-    getField() {
-      return this.getChildAttr(FIELD_DATA_PROP);
-    },
-
-    getValidateStatus() {
-      const onlyControl = this.getOnlyControl();
-      if (!onlyControl) {
-        return '';
-      }
-      const field = this.getField();
-      if (field.validating) {
-        return 'validating';
-      }
-      if (field.errors) {
-        return 'error';
-      }
-      const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
-      if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
-        return 'success';
-      }
-      return '';
-    },
-
-    // Resolve duplicated ids bug between different forms
-    // https://github.com/ant-design/ant-design/issues/7351
     onLabelClick() {
-      const id = this.id || this.getId();
+      const id = this.fieldId;
       if (!id) {
         return;
       }
@@ -269,24 +300,6 @@ export default {
       }
     },
 
-    isRequired() {
-      const { required } = this;
-      if (required !== undefined) {
-        return required;
-      }
-      if (this.getOnlyControl()) {
-        const meta = this.getMeta() || {};
-        const validate = meta.validate || [];
-
-        return validate
-          .filter(item => !!item.rules)
-          .some(item => {
-            return item.rules.some(rule => rule.required);
-          });
-      }
-      return false;
-    },
-
     renderHelp(prefixCls) {
       const help = this.getHelpMessage();
       const children = help ? (
@@ -314,17 +327,12 @@ export default {
     },
 
     renderValidateWrapper(prefixCls, c1, c2, c3) {
-      const props = this.$props;
-      const onlyControl = this.getOnlyControl;
-      const validateStatus =
-        props.validateStatus === undefined && onlyControl
-          ? this.getValidateStatus()
-          : props.validateStatus;
+      const validateStatus = this.validateState;
 
       let classes = `${prefixCls}-item-control`;
       if (validateStatus) {
         classes = classNames(`${prefixCls}-item-control`, {
-          'has-feedback': props.hasFeedback || validateStatus === 'validating',
+          'has-feedback': this.hasFeedback || validateStatus === 'validating',
           'has-success': validateStatus === 'success',
           'has-warning': validateStatus === 'warning',
           'has-error': validateStatus === 'error',
@@ -334,7 +342,7 @@ export default {
       const IconNode = validateStatus && iconMap[validateStatus];
 
       const icon =
-        props.hasFeedback && IconNode ? (
+        this.hasFeedback && IconNode ? (
           <span class={`${prefixCls}-item-children-icon`}>
             <IconNode />
           </span>
@@ -374,9 +382,9 @@ export default {
         labelCol: contextLabelCol,
         colon: contextColon,
       } = this.FormContext;
-      const { labelAlign, labelCol, colon, id, htmlFor } = this;
+      const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
       const label = getComponent(this, 'label');
-      const required = this.isRequired();
+      const required = this.isRequired;
       const mergedLabelCol = labelCol || contextLabelCol || {};
 
       const mergedLabelAlign = labelAlign || contextLabelAlign;
@@ -416,7 +424,7 @@ export default {
       return label ? (
         <Col {...colProps}>
           <label
-            for={htmlFor || id || this.getId()}
+            for={htmlFor || fieldId}
             class={labelClassName}
             title={typeof label === 'string' ? label : ''}
             onClick={this.onLabelClick}
@@ -426,28 +434,28 @@ export default {
         </Col>
       ) : null;
     },
-    renderChildren(prefixCls) {
+    renderChildren(prefixCls, child) {
       return [
         this.renderLabel(prefixCls),
         this.renderWrapper(
           prefixCls,
           this.renderValidateWrapper(
             prefixCls,
-            this.slotDefault,
+            child,
             this.renderHelp(prefixCls),
             this.renderExtra(prefixCls),
           ),
         ),
       ];
     },
-    renderFormItem() {
+    renderFormItem(child) {
       const { prefixCls: customizePrefixCls } = this.$props;
       const { class: className, ...restProps } = this.$attrs;
       const getPrefixCls = this.configProvider.getPrefixCls;
       const prefixCls = getPrefixCls('form', customizePrefixCls);
-      const children = this.renderChildren(prefixCls);
+      const children = this.renderChildren(prefixCls, child);
       const itemClassName = {
-        [className]: true,
+        [className]: className,
         [`${prefixCls}-item`]: true,
         [`${prefixCls}-item-with-help`]: this.helpShow,
       };
@@ -458,63 +466,33 @@ export default {
         </Row>
       );
     },
-    decoratorOption(vnode) {
-      if (vnode.data && vnode.data.directives) {
-        const directive = find(vnode.data.directives, ['name', 'decorator']);
-        warning(
-          !directive || (directive && Array.isArray(directive.value)),
-          'Form',
-          `Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive
-            ? directive.value
-            : directive)}. At ${vnode.tag}.`,
-        );
-        return directive ? directive.value : null;
-      } else {
-        return null;
-      }
-    },
-    decoratorChildren(vnodes) {
-      const { FormContext } = this;
-      const getFieldDecorator = FormContext.form.getFieldDecorator;
-      for (let i = 0, len = vnodes.length; i < len; i++) {
-        const vnode = vnodes[i];
-        if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
-          break;
-        }
-        if (vnode.children) {
-          vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
-        } else if (vnode.componentOptions && vnode.componentOptions.children) {
-          vnode.componentOptions.children = this.decoratorChildren(
-            cloneVNodes(vnode.componentOptions.children),
-          );
-        }
-        const option = this.decoratorOption(vnode);
-        if (option && option[0]) {
-          vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
-        }
-      }
-      return vnodes;
-    },
   },
-
   render() {
-    const { decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}, FormContext } = this;
-    let child = getSlot(this);
-    if (decoratorFormProps.form && fieldDecoratorId && child.length) {
-      const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
-      child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
-      warning(
-        !(child.length > 1),
-        'Form',
-        '`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
-      );
-      this.slotDefault = child;
-    } else if (FormContext.form) {
-      child = cloneVNodes(child);
-      this.slotDefault = this.decoratorChildren(child);
-    } else {
-      this.slotDefault = child;
+    const { autoLink } = getOptionProps(this);
+    const children = getSlot(this);
+    let firstChildren = children[0];
+    if (this.fieldName && autoLink && isValidElement(firstChildren)) {
+      const originalEvents = getEvents(firstChildren);
+      const originalBlur = originalEvents.onBlur;
+      const originalChange = originalEvents.onChange;
+      firstChildren = cloneElement(firstChildren, {
+        ...(this.fieldId ? { id: this.fieldId } : undefined),
+        onBlur: (...args) => {
+          originalBlur && originalBlur(...args);
+          this.onFieldBlur();
+        },
+        onChange: (...args) => {
+          if (Array.isArray(originalChange)) {
+            for (let i = 0, l = originalChange.length; i < l; i++) {
+              originalChange[i](...args);
+            }
+          } else if (originalChange) {
+            originalChange(...args);
+          }
+          this.onFieldChange();
+        },
+      });
     }
-    return this.renderFormItem();
+    return this.renderFormItem([firstChildren, children.slice(1)]);
   },
 };
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 97fd53963..5a248ee90 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1,144 +1,77 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders ./antdv-demo/docs/form/demo/advanced-search.vue correctly 1`] = `
-<div id="components-form-demo-advanced-search">
-  <form class="ant-advanced-search-form ant-form ant-form-horizontal">
-    <div class="ant-row" style="margin-left: -12px; margin-right: -12px;">
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-1" title="Field 1" class="ant-form-item-required">Field 1</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-1" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-2" title="Field 2" class="ant-form-item-required">Field 2</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-2" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-3" title="Field 3" class="ant-form-item-required">Field 3</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-3" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-4" title="Field 4" class="ant-form-item-required">Field 4</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-4" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-5" title="Field 5" class="ant-form-item-required">Field 5</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-5" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-6" title="Field 6" class="ant-form-item-required">Field 6</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-6" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-7" title="Field 7" class="ant-form-item-required">Field 7</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-7" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-8" title="Field 8" class="ant-form-item-required">Field 8</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-8" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-9" title="Field 9" class="ant-form-item-required">Field 9</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-9" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
-        <div class="ant-row ant-form-item">
-          <div class="ant-col ant-form-item-label"><label for="advanced_search_field-10" title="Field 10" class="ant-form-item-required">Field 10</label></div>
-          <div class="ant-col ant-form-item-control-wrapper">
-            <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-10" class="ant-input"></span>
-              <!---->
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="ant-row">
-      <div class="ant-col ant-col-24" style="text-align: right;"><button type="submit" class="ant-btn ant-btn-primary"><span>Search</span></button> <button type="button" class="ant-btn" style="margin-left: 8px;"><span>Clear</span></button> <a style="margin-left: 8px; font-size: 12px;">
-          Collapse
-          <span role="img" aria-label="down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a></div>
-    </div>
-  </form>
-  <div class="search-result-list">
-    Search Result List
-  </div>
-</div>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
+exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_note" title="Note" class="ant-form-item-required">Note</label></div>
-    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_note" class="ant-input"></span>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_gender" title="Gender" class="ant-form-item-required">Gender</label></div>
-    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
     </div></span>
     <!---->
   </div>
   </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
+        Online
+      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
+        Promotion
+      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
+        Offline
+      </span></label></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="">Resources</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
+        Sponsor
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
+        Venue
+      </span></label></div></span>
+      <!---->
+    </div>
+  </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Cancel</span></button></span>
         <!---->
       </div>
     </div>
@@ -146,20 +79,35 @@ exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = `
-<form class="ant-form ant-form-inline">
+exports[`renders ./antdv-demo/docs/form-model/demo/custom-validation.md correctly 1`] = `
+<form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-label"><label for="customized_form_controls_price" title="Price" class="">Price</label></div>
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="customized_form_controls_price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div tabindex="0" class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    </div></span></span>
-    <!---->
-  </div>
-  </div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Password" class="">Password</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Age" class="">Age</label></div>
+    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
+        <!---->
+      </div>
+    </div>
+  </div>
+  <div class="ant-row ant-form-item">
+    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
         <!---->
       </div>
     </div>
@@ -167,7 +115,7 @@ exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correc
 </form>
 `;
 
-exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`] = `
+exports[`renders ./antdv-demo/docs/form-model/demo/dynamic-form-item.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
@@ -178,7 +126,7 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
   </div>
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
         <!---->
       </div>
     </div>
@@ -186,88 +134,25 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
 </form>
 `;
 
-exports[`renders ./antdv-demo/docs/form/demo/dynamic-rule.vue correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_username" title="Name" class="ant-form-item-required">Name</label></div>
-    <div class="ant-col ant-col-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your name" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_username" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_nickname" title="Nickname" class="">Nickname</label></div>
-    <div class="ant-col ant-col-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your nickname" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_nickname" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
-      Nickname is required
-    </span></label></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Check</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/form-in-modal.vue correctly 1`] = `
-<div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
-  <!---->
-</div>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/global-state.vue correctly 1`] = `
-<div id="components-form-demo-global-state">
-  <form class="ant-form ant-form-inline">
-    <div class="ant-row ant-form-item">
-      <div class="ant-col ant-form-item-label"><label for="global_state_username" title="Username" class="ant-form-item-required">Username</label></div>
-      <div class="ant-col ant-form-item-control-wrapper">
-        <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="global_state_username" class="ant-input"></span>
-          <!---->
-        </div>
-      </div>
-    </div>
-  </form> <pre class="language-bash">    {
-  "username": {
-    "value": "benjycui"
-  }
-}
-  </pre>
-</div>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`] = `
+exports[`renders ./antdv-demo/docs/form-model/demo/horizontal-login.md correctly 1`] = `
 <form class="ant-form ant-form-inline">
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_userName" class="ant-input"></span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" class="ant-input"></span></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_password" class="ant-input"></span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" class="ant-input"></span></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button disabled="disabled" type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
         <!---->
       </div>
     </div>
@@ -275,7 +160,7 @@ exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`]
 </form>
 `;
 
-exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
+exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
     <div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
@@ -317,533 +202,81 @@ exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
 </form>
 `;
 
-exports[`renders ./antdv-demo/docs/form/demo/normal-login.vue correctly 1`] = `
-<form class="login-form ant-form ant-form-horizontal" id="components-form-demo-normal-login">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_userName" class="ant-input"></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_password" class="ant-input"></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
-      Remember me
-    </span></label><a href="" class="login-form-forgot">
-          Forgot password
-        </a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
-        Or
-        <a href="">
-          register now!
-        </a></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = `
+exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] = `
 <form class="ant-form ant-form-horizontal">
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_email" title="E-mail" class="ant-form-item-required">E-mail</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_email" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_password" title="Password" class="ant-form-item-required">Password</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_password" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_confirm" title="Confirm Password" class="ant-form-item-required">Confirm Password</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_confirm" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_nickname" title="" class="ant-form-item-required"><span>
-      Nickname&nbsp;
-      <span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span></label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_nickname" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_residence" title="Habitual Residence" class="ant-form-item-required">Habitual Residence</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" data-__meta="[object Object]" data-__field="[object Object]" id="register_residence" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div tabindex="0" class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="register_prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
-          +86
-        </div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    </div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_phone" class="ant-input"></span></span></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
-      </li>
-      </ul>
-    </div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
-  </div>
-  </div></span>
-  <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_captcha" title="Captcha" class="ant-form-item-required">Captcha</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row" style="margin-left: -4px; margin-right: -4px;"><div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_captcha" class="ant-input"></div> <div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><button type="button" class="ant-btn"><span>Get captcha</span></button></div>
-    </div></span>
-    <!---->
-    <div class="ant-form-extra">We must make sure that your are a human.</div>
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="register_agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
-      I have read the
-      <a href="">
-        agreement
-      </a></span></label></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Register</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/time-related-controls.vue correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-picker" title="DatePicker" class="ant-form-item-required">DatePicker</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-time-picker" title="DatePicker[showTime]" class="ant-form-item-required">DatePicker[showTime]</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-time-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_month-picker" title="MonthPicker" class="ant-form-item-required">MonthPicker</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_month-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-picker" title="RangePicker" class="ant-form-item-required">RangePicker</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-time-picker" title="RangePicker[showTime]" class="ant-form-item-required">RangePicker[showTime]</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" style="width: 350px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-time-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_time-picker" title="TimePicker" class="ant-form-item-required">TimePicker</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-time-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] = `
-<form class="ant-form ant-form-horizontal" id="components-form-demo-validate-other">
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
-      China
-    </span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select" title="Select" class="ant-form-item-required">Select</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
     </div></span>
     <!---->
   </div>
   </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror">&nbsp;</span></div>
-      </li>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
+      <!---->
     </div>
   </div>
   </div>
-  </div></span>
-  <!---->
-  </div>
-  </div>
-  </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_input-number" title="InputNumber" class="">InputNumber</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
-    </div><span class="ant-form-text">
-      machines
-    </span></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_switch" title="Switch" class="">Switch</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_switch"><span class="ant-switch-inner"></span></button></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
         <!---->
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_slider" title="Slider" class="">Slider</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-slider ant-slider-with-marks" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_slider"><div class="ant-slider-rail"></div><div class="ant-slider-track" style="left: 0%; width: 0%;"></div><div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 20%;"></span><span class="ant-slider-dot" style="left: 40%;"></span><span class="ant-slider-dot" style="left: 60%;"></span><span class="ant-slider-dot" style="left: 80%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
-      <div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%; transform: translateX(-50%);"></div>
-      <div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;">A</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 20%;">B</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 40%;">C</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 60%;">D</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 80%;">E</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 100%;">F</span></div>
-    </div></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-group" title="Radio.Group" class="">Radio.Group</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
-        item 1
-      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
-        item 2
-      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
-        item 3
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
+        Online
+      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
+        Promotion
+      </span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
+        Offline
       </span></label></div></span>
       <!---->
     </div>
   </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-button" title="Radio.Button" class="">Radio.Button</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
-        item 1
-      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
-        item 2
-      </span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
-        item 3
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
+        Sponsor
+      </span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
+        Venue
       </span></label></div></span>
       <!---->
     </div>
   </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
+    <div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
     <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
-            A
-          </span></label></div>
-      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
-            B
-          </span></label></div>
-      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
-            C
-          </span></label></div>
-      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
-            D
-          </span></label></div>
-      <div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
-            E
-          </span></label></div>
-    </div>
-  </div></span>
-  <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_rate" title="Rate" class="">Rate</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" role="radiogroup" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_rate"><li class="ant-rate-star ant-rate-star-full"><div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0"><div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-      <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-    </div>
-    </li>
-    <li class="ant-rate-star ant-rate-star-full">
-      <div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
-        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-      </div>
-    </li>
-    <li class="ant-rate-star ant-rate-star-full">
-      <div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
-        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-      </div>
-    </li>
-    <li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
-      <div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
-        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-      </div>
-    </li>
-    <li class="ant-rate-star ant-rate-star-zero">
-      <div role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0">
-        <div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-        <div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
-      </div>
-    </li>
-    </ul></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_upload" title="Upload" class="">Upload</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
         <!---->
-        <div class="ant-form-extra">longgggggggggggggggggggggggggggggggggg</div>
       </div>
     </div>
   </div>
   <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_dragger" title="Dragger" class="">Dragger</label></div>
-    <div class="ant-col ant-col-14 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="dropbox"><span data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_dragger" class=""><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
+    <div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
+      <div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
         <!---->
       </div>
     </div>
   </div>
 </form>
 `;
-
-exports[`renders ./antdv-demo/docs/form/demo/validate-static.vue correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item ant-form-item-with-help">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error" class="ant-input"></span>
-        <div class="ant-form-explain show-help-enter">Should be combination of numbers &amp; alphabets</div>
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning" class="ant-input"></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item ant-form-item-with-help">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><input placeholder="I'm the content is being validated" type="text" id="validating" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
-        <div class="ant-form-explain show-help-enter">The information is being validated...</div>
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><input placeholder="I'm the content" type="text" id="success" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item ant-form-item-with-help">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
-        <div class="ant-form-explain show-help-enter">Should be combination of numbers &amp; alphabets</div>
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
-      <!---->
-    </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-time-picker" style="width: 100%;"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
-        Option 1
-      </div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-    </div><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item ant-form-item-with-help">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label"></span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
-        <div class="ant-form-explain show-help-enter">The information is being validated...</div>
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item" style="margin-bottom: 0px;">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-col ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <div class="ant-form-explain show-help-enter">Please select the correct date</div>
-    </div>
-  </div>
-  </div><span style="display: inline-block; width: 24px; text-align: center;">
-      -
-    </span>
-  <div class="ant-row ant-form-item" style="display: inline-block;">
-    <div class="ant-col ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
-      <!---->
-    </div>
-  </div>
-  </div></span>
-  <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
-    </div><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
-    <!---->
-  </div>
-  </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><input placeholder="with allowClear" type="text" class="ant-input"><span class="ant-input-suffix"></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-  <div class="ant-row ant-form-item">
-    <div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
-    <div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password and allowClear" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
-        <!---->
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
-exports[`renders ./antdv-demo/docs/form/demo/without-form-create.vue correctly 1`] = `
-<form class="ant-form ant-form-horizontal">
-  <div class="ant-row ant-form-item ant-form-item-with-help">
-    <div class="ant-col ant-col-7 ant-form-item-label"><label title="Prime between 8 &amp; 12" class="">Prime between 8 &amp; 12</label></div>
-    <div class="ant-col ant-col-12 ant-form-item-control-wrapper">
-      <div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
-      <div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
-    </div></span>
-    <div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>
-  </div>
-  </div>
-  </div>
-</form>
-`;
diff --git a/components/form/__tests__/demo.test.js b/components/form/__tests__/demo.test.js
index e5338b89c..22a74f8a8 100644
--- a/components/form/__tests__/demo.test.js
+++ b/components/form/__tests__/demo.test.js
@@ -1,3 +1,3 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
+demoTest('form-model');
diff --git a/components/form/index.jsx b/components/form/index.jsx
index b5c0b1602..b63f33cf5 100644
--- a/components/form/index.jsx
+++ b/components/form/index.jsx
@@ -1,20 +1,12 @@
-import Vue from 'vue';
 import Form from './Form';
-import ref from 'vue-ref';
-import FormDecoratorDirective from '../_util/FormDecoratorDirective';
 
-Vue.use(ref, { name: 'ant-ref' });
-Vue.use(FormDecoratorDirective);
-Vue.prototype.$form = Form;
-
-export { FormProps, FormCreateOption, ValidationRule } from './Form';
+export { FormProps, ValidationRule } from './Form';
 export { FormItemProps } from './FormItem';
 
 /* istanbul ignore next */
-Form.install = function(Vue) {
-  Vue.component(Form.name, Form);
-  Vue.component(Form.Item.name, Form.Item);
-  Vue.prototype.$form = Form;
+Form.install = function(app) {
+  app.component(Form.name, Form);
+  app.component(Form.Item.name, Form.Item);
 };
 
 export default Form;
diff --git a/components/form-model/utils/asyncUtil.js b/components/form/utils/asyncUtil.js
similarity index 100%
rename from components/form-model/utils/asyncUtil.js
rename to components/form/utils/asyncUtil.js
diff --git a/components/form-model/utils/messages.js b/components/form/utils/messages.js
similarity index 100%
rename from components/form-model/utils/messages.js
rename to components/form/utils/messages.js
diff --git a/components/form-model/utils/typeUtil.js b/components/form/utils/typeUtil.js
similarity index 100%
rename from components/form-model/utils/typeUtil.js
rename to components/form/utils/typeUtil.js
diff --git a/components/form-model/utils/validateUtil.js b/components/form/utils/validateUtil.js
similarity index 100%
rename from components/form-model/utils/validateUtil.js
rename to components/form/utils/validateUtil.js
diff --git a/components/form-model/utils/valueUtil.js b/components/form/utils/valueUtil.js
similarity index 100%
rename from components/form-model/utils/valueUtil.js
rename to components/form/utils/valueUtil.js
diff --git a/components/index.js b/components/index.js
index 674b71f30..142ccd2d7 100644
--- a/components/index.js
+++ b/components/index.js
@@ -53,7 +53,7 @@ import { default as Divider } from './divider';
 
 import { default as Dropdown } from './dropdown';
 
-import { default as FormModel } from './form-model';
+import { default as Form } from './form';
 
 import { default as Icon } from './icon';
 
@@ -164,7 +164,7 @@ const components = [
   DatePicker,
   Divider,
   Dropdown,
-  FormModel,
+  Form,
   Icon,
   Input,
   InputNumber,
@@ -249,7 +249,7 @@ export {
   DatePicker,
   Divider,
   Dropdown,
-  FormModel,
+  Form,
   Icon,
   Input,
   InputNumber,