Form

Import: import { Form } from '@kubed/components;'

Source: View source code

Docs: Edit this page

npm: @kubed/components

Documentation

Component Props

Basic Usage

Form controls are used to create an entity or collect information when the input data type needs to be verified.

() => {
  const onFinish = (values) => {
    console.log(values);
  };
  return (
    <Form onFinish={onFinish} initialValues={{ username: 'wayne' }}>
      <Row gutter={[10, 40]}>
        <Col span={6}>
          <FormItem
            name="username"
            label="Username"
            help="user name must input"
            rules={[{ required: true, message: 'Please input your username!' }]}
          >
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem
            name="uid"
            label="username"
            help="help content"
            rules={[{ required: true, message: 'Please input your uid!' }]}
          >
            <Input />
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem name="group" label="Group" help="help content" tooltip="tooltip 内容 content">
            <Input />
          </FormItem>
        </Col>
      </Row>
      <button type="submit">Submit</button>
    </Form>
  );
};

1
() => {
2
  const onFinish = (values) => {
3
    console.log(values);
4
  };
5
  return (
6
    <Form onFinish={onFinish} initialValues={{ username: 'wayne' }}>
7
      <Row gutter={[10, 40]}>
8
        <Col span={6}>
9
          <FormItem
10
            name="username"
11
            label="Username"
12
            help="user name must input"
13
            rules={[{ required: true, message: 'Please input your username!' }]}
14
          >
15
            <Input />
16
          </FormItem>
17
        </Col>
18
        <Col span={6}>
19
          <FormItem
20
            name="uid"
21
            label="username"
22
            help="help content"
23
            rules={[{ required: true, message: 'Please input your uid!' }]}
24
          >
25
            <Input />
26
          </FormItem>
27
        </Col>
28
        <Col span={6}>
29
          <FormItem name="group" label="Group" help="help content" tooltip="tooltip 内容 content">
30
            <Input />
31
          </FormItem>
32
        </Col>
33
      </Row>
34
      <button type="submit">Submit</button>
35
    </Form>
36
  );
37
};
38

Dynamic Form

The dynamic form can add the number of form items and customize the input content of the form items.

() => {
  const [form] = useForm();
  const getFieldErrors = () => {
    console.log(form.validateFields());
  };
  const onFinish = (values) => {
    console.log(values);
  };
  const { Add, Trash } = KubeIcon;
  return (
    <Form onFinish={onFinish} form={form}>
      <FormList name="users">
        {(fields, { add, remove }) => (
          <>
            {fields.map(({ key, name, ...restField }) => (
              <Row gutter={[10, 40]} key={key}>
                <Col span={5}>
                  <FormItem
                    {...restField}
                    name={[name, 'first']}
                    label="Fist Name"
                    help="user name must input"
                    rules={[{ required: true, message: 'Please input your username!' }]}
                  >
                    <Input />
                  </FormItem>
                </Col>
                <Col span={5}>
                  <FormItem
                    {...restField}
                    name={[name, 'last']}
                    label="Last Name"
                    help="help content"
                    rules={[{ required: true, message: 'Please input your uid!' }]}
                  >
                    <Input />
                  </FormItem>
                </Col>
                <Col span={1}>
                  <Button variant="text" onClick={() => remove(name)}>
                    <Trash size={16} />
                  </Button>
                </Col>
              </Row>
            ))}
            <Row>
              <Col span={12}>
                <Button onClick={() => add()}>
                  <Add size={16} />
                </Button>
              </Col>
            </Row>
          </>
        )}
      </FormList>
      <button type="button" onClick={getFieldErrors}>
        Submit
      </button>
    </Form>
  );
};

1
() => {
2
  const [form] = useForm();
3
  const getFieldErrors = () => {
4
    console.log(form.validateFields());
5
  };
6
  const onFinish = (values) => {
7
    console.log(values);
8
  };
9
  const { Add, Trash } = KubeIcon;
10
  return (
11
    <Form onFinish={onFinish} form={form}>
12
      <FormList name="users">
13
        {(fields, { add, remove }) => (
14
          <>
15
            {fields.map(({ key, name, ...restField }) => (
16
              <Row gutter={[10, 40]} key={key}>
17
                <Col span={5}>
18
                  <FormItem
19
                    {...restField}
20
                    name={[name, 'first']}
21
                    label="Fist Name"
22
                    help="user name must input"
23
                    rules={[{ required: true, message: 'Please input your username!' }]}
24
                  >
25
                    <Input />
26
                  </FormItem>
27
                </Col>
28
                <Col span={5}>
29
                  <FormItem
30
                    {...restField}
31
                    name={[name, 'last']}
32
                    label="Last Name"
33
                    help="help content"
34
                    rules={[{ required: true, message: 'Please input your uid!' }]}
35
                  >
36
                    <Input />
37
                  </FormItem>
38
                </Col>
39
                <Col span={1}>
40
                  <Button variant="text" onClick={() => remove(name)}>
41
                    <Trash size={16} />
42
                  </Button>
43
                </Col>
44
              </Row>
45
            ))}
46
            <Row>
47
              <Col span={12}>
48
                <Button onClick={() => add()}>
49
                  <Add size={16} />
50
                </Button>
51
              </Col>
52
            </Row>
53
          </>
54
        )}
55
      </FormList>
56
      <button type="button" onClick={getFieldErrors}>
57
        Submit
58
      </button>
59
    </Form>
60
  );
61
};
62