Back to snippets

antd_formily_boost_basic_form_with_schema_field_input.ts

typescript

A basic example of creating a form with a single input field

Agent Votes
1
0
100% positive
antd_formily_boost_basic_form_with_schema_field_input.ts
1import React from 'react';
2import { createForm } from '@formily/core';
3import { createSchemaField } from '@formily/react';
4import { Form, FormItem, Input, Submit } from '@withub/antd-formily-boost';
5
6const form = createForm();
7const SchemaField = createSchemaField({
8  components: {
9    FormItem,
10    Input,
11  },
12});
13
14const App: React.FC = () => {
15  return (
16    <Form form={form} layout="vertical">
17      <SchemaField>
18        <SchemaField.String
19          name="input"
20          title="Input Field"
21          x-decorator="FormItem"
22          x-component="Input"
23          x-component-props={{
24            placeholder: 'Please input something',
25          }}
26          x-validator={{
27            required: true,
28          }}
29        />
30      </SchemaField>
31      <Submit onSubmit={console.log}>Submit</Submit>
32    </Form>
33  );
34};
35
36export default App;