How do you put form in modal and form horizontally in antd? - Codes Helper

the following is the demo code:

The

Modal call is as follows:

 <Modal
              title=""
              visible={this.state.visible}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              width={800}
            >
              <WrappedCVForm {...formData} />
            </Modal>

Form is defined as follows

import React, { Component } from "react";
import { Form, Input } from "antd";
const FormItem = Form.Item;


class CVForm extends Component {
  componentDidMount() {
    // To disabled submit button at the beginning.
    this.props.form.validateFields();
  }

  render() {
    const { getFieldDecorator } = this.props.form;

    return (
      <Form layout="horizontal">
        <FormItem
          label=""
        >
          {getFieldDecorator("number", {
            rules: [{ required: true }]
          })(
            <Input placeholder="" />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("country", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("postalCode", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("province", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("city", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("address", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("name", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
        <FormItem
          label=""
        >
          {getFieldDecorator("phone", {
            rules: [{ required: false }]
          })(
            <Input disabled />
          )}
        </FormItem>
      </Form>
    );
  }
}

const WrappedCVForm = Form.create({
  mapPropsToFields(props) {
    return {
      country: Form.createFormField({
        ...props.country,
        value: props.country.value,
      }),
      postalCode: Form.createFormField({
        ...props.postalCode,
        value: props.postalCode.value,
      }),
      province: Form.createFormField({
        ...props.province,
        value: props.province.value,
      }),
      city: Form.createFormField({
        ...props.city,
        value: props.city.value,
      }),
      address: Form.createFormField({
        ...props.address,
        value: props.address.value,
      }),
      name: Form.createFormField({
        ...props.name,
        value: props.name.value,
      }),
      phone: Form.createFormField({
        ...props.phone,
        value: props.phone.value,
      })
    };
  }
})(CVForm);
export default WrappedCVForm;

the result confirms this: