antd_formily_boost_json_schema_form_quickstart.ts

1import React from 'react';
2import { createForm } from '@formily/core';
3import { SchemaField, SchemaForm } from '@withub/antd-formily-boost';
4import { FormButtonGroup, Submit } from '@formily/antd-v5';
5
6// 1. Create a form instance
7const form = createForm();
8
9// 2. Define your schema
10const schema = {
11  type: 'object',
12  properties: {
13    input: {
14      type: 'string',
15      title: 'Input Box',
16      'x-decorator': 'FormItem',
17      'x-component': 'Input',
18      'x-validator': {
19        required: true,
20      },
21    },
22    select: {
23      type: 'string',
24      title: 'Selection',
25      'x-decorator': 'FormItem',
26      'x-component': 'Select',
27      enum: [
28        { label: 'Option 1', value: 1 },
29        { label: 'Option 2', value: 2 },
30      ],
31    },
32  },
33};
34
35const App: React.FC = () => {
36  return (
37    <SchemaForm
38      form={form}
39      onAutoSubmit={console.log}
40      layout="vertical"
41    >
42      <SchemaField schema={schema} />
43      <FormButtonGroup>
44        <Submit block size="large">
45          Submit
46        </Submit>
47      </FormButtonGroup>
48    </SchemaForm>
49  );
50};
51
52export default App;