Back to snippets
antd_formily_boost_basic_form_with_schema_field_input.ts
typescriptA 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;