English | 中文说明
The project has been migrated to @simpleform/form, this repository is deprecated.
Lightweight form container two-way binding component that automatically handles the value
(or other) and onChange
of the control to complete the display and update of the form values. Other operations can be implemented through the methods provided by the injected FormStore
instance.
- Version 5.x
Major Updates
- Adjusted rendering, nesting between
Form.Item
is no longer allowed, detailed usage documentation has been updated. - The
Form.Item
option inForm.List
sets thename
field as an attribute field in the array. - 5.0.1
changed tostore
form
- Adjusted rendering, nesting between
- 4.x
- 4.0.12 optimize the routing system in forms,
changed tojoinPath
joinFormPath
. - 4.0.11 Add
tagName
property to theForm
component, which can replace the defaultform
tag - optimize the routing system in forms, fix the
useFormValues
error.
- 4.0.12 optimize the routing system in forms,
- 3.x
Important architecture update, you need to delete the old package and install the new version again
- add
component
property to dynamically replace the display components of theForm.Item
andForm.List
components, and the display component's own props can be set either globally onForm
or locally onForm.Item
or `Form. onFieldsChange
andonValuesChange
changed- 3.0.3
changed todata-type="fragment"
data-type="ignore"
- 3.1.2 Add
trigger
property toForm.Item
to set the event that triggers the collection of values, andvalidateTrigger
to set the event that triggers the form validation. Alsorules
property can setvalidateTrigger
event for each rule. - 3.1.3 Add
tooltip
property to add tip.
- add
- 2.x
.col
andcustomInner
deprecated
- 1.3.x:
Addedinline
inline layout attribute, used withcol
attributeAddcustomInner
property, you can customize the display container- Added
labelAlign
andlabelWidth
properties - Added
valueSetter
property, used in conjunction withvalueGetter
property to format input and output items.
- 1.2.x:
- 1.2.9 add
footer
props - add
data-name
setting to mark controls that match thevalue,onChange
requirement Addcol
layout attribute to allow for raster layout
- 1.2.9 add
- Version 1.0.x:
labelWidth
andlayout
have been changed to labelStyle, allowing you to customize your own label label-related styles- inline changed to layout, with
'horizontal' | 'vertical'
. - Changes to the form char rule in forms: where the path contained an array of items, for example
a.b.0
, this has now been changed toa.b[0]
.
- 0.3.8 Initial release
- The css style file needs to be introduced before it can be used, for example:
import 'react-easy-formcore/lib/css/main.css'
;
The smallest unit of a component in a form, and nodes as an object can be nested within each other.
- Provides styles, as well as
value
(or set viavalueProp
) andonChange
two-way bindings. - You can customize
onChange
in outside, but you can only set the form value via an instance method such asform.setFieldValue
. - Custom form validation rules can be provided with the form validation rules property
rules
. - When a non-form component or node is added outside the input form control, bind the target control by adding
data-type="ignore"
to filter the non-target node or by settingdata-name
to mark the target input form.
The Form.Item
component acts as an item in the Form.List
array type and is combined to form an array
- Only
Form.Item
items are recognised inForm.List
, Thename
field ofForm.Item
, if set, is the field property in the array, if not, it defaults to the array serial number. - The
rules
provided byForm.List
are valid for all input items in the array, but have a lower priority than therules
of theForm.Item
in the array
npm install react-easy-formcore --save
# or
yarn add react-easy-formcore
import React from "react";
import { Form, useFormStore, useFormValues } from "react-easy-formcore";
import 'react-easy-formcore/lib/css/main.css';
import { Input, Select } from "antd";
export default function Demo() {
const form = useFormStore();
const onSubmit = async (e) => {
e.preventDefault();
const { error, values } = await form.validate();
console.log(error, values, 'error ang values');
};
const validator = (value) => {
if (value?.length < 2) {
return Promise.reject(new Error('length is < 2'));
}
}
const formvalues = useFormValues(form, ['name1', 'name2'])
console.log(formvalues, 'formvalues')
return (
<Form initialValues={{ name1: 1111 }} form={form} onSubmit={onSubmit}>
<Form.Item label="Name1" name="name1" rules={[{ required: true, message: 'name1 is Empty' }, { validator: validator, message: 'validator error' }]}>
<div data-type="ignore">
<input />
</div>
</Form.Item>
<Form.Item label="object" name="name2.a" rules={[{ required: true, message: 'name2.a is empty' }]}>
<input />
</Form.Item>
<Form.Item label="list" name="name3[0]" rules={[{ required: true, message: 'name3[0] is empty' }]}>
<input />
</Form.Item>
<Form.Item label="">
<button>Submit</button>
</Form.Item>
</Form>
);
};
import React from "react";
import { Form, FormStore } from "react-easy-formcore";
import 'react-easy-formcore/lib/css/main.css';
import { Input, Select } from "antd";
export default function Demo() {
const form = useFormStore();
const onSubmit = async (e) => {
e.preventDefault();
const { error, values } = await form.validate();
console.log(error, values, 'error ang values');
};
const validator = (value) => {
if (value?.length < 2) {
return Promise.reject(new Error('length is < 2'));
}
}
return (
<Form form={form} onSubmit={onSubmit}>
<Form.List name="list">
<Form.Item
rules={[
{ required: true, message: "list's one is Empty" },
{ validator: validator, message: "custome tips" },
]}
>
<Input />
</Form.Item>
<Form.Item
rules={[{ required: true, message: "list's two is Empty" }]}
>
<Input />
</Form.Item>
</Form.List>
<Form.Item label="">
<button>Submit</button>
</Form.Item>
</Form>
);
};
className
string
class name,optional
.label
string
label,optional
.labelStyle
CSSProperties
custom label's style,optional
.labelWidth
CSSProperties['width']
, the width of the label label.labelAlign
CSSProperties['textAlign']
, the label label's textAlign property.inline
boolea
, Whether or not field display components have inline layout.layout
'horizontal'|'vertical'
field’s display components set the layout type, the default value ishorizontal
.colon
boolean
whether add colonrequired
boolean
Indicates that the value of the field is requiredoptional
。gutter
number
The distance between field's display component custom labels and form components,optional
.error
string
form field displays the component's error message field.suffix
React.ReactNode
Suffix node,optional
.footer
React.ReactNode
bootom node,optional
.tooltip
string
Tip icon to prompt for information.optional
.compact
boolean
Whether or not compact, will remove the component'smargin-bottom
.optional
.
Inherited field display component
className
The class name of the form element,optional
.form
The form data store,required
.tagName
Replace the element tag name of the form, defaultform
taginitialValues
The initial value of the form, which is overridden by theinitialValue
of the form field, Note that this value can only initialise the formoptional
.onSubmit
form
tag triggers the reset default event, onlybutton
tags that providehtmlType=submit
can triggeroptional
.onReset
form
tag triggers the reset default event, onlybutton
tags that providehtmlType=reset
can triggeroptional
.onFieldsChange
The event function when a form changes onChange will only be triggered by the control's activeonChange
, not byform.setFieldValue
andform.setFieldsValue
, avoiding circular calls。optional
.onValuesChange
Listening for changes in form values.optional
.
Inherited field display component
className
Form field class name,optional
.component
field display component.name
Form field name,optional
.trigger
Sets the event name of the form field to collect form values, defaultonChange
.validateTrigger
Sets the event for trigger form field validation, defaultonChange
.valueProp
The field name of the value in the callback function object, the default value is'value'
.valueGetter
A function to format the output form value, used withvalueSetter
,optional
.valueSetter
function to format input form value, used withvalueGetter
,optional
.rules
Checksum rules for form fieldsoptional
.initialValue
The initial value of the form field, note that this value is different fromvalue
when the form is rendered for the first time.onFieldsChange
The event function when the value of the control changes will only be triggered by the control's activeonChange
, not byform.setFieldValue
andform.setFieldsValue
, avoiding circular calls.optional
.onValuesChange
Listening for changes in form values.optional
。errorClassName
add a custom class name when there is an error message,optional
.
Inherited field display component
className
Form field class name,optional
.component
field display component.name
Form field name,optional
.initialValue
Form field initial value, Note that this value can only initialise the formoptional
.rules
Checksum rules for form fieldsoptional
.
The rules in the fields of the values in rules
perform the checks in order, and only one rule can be set for each item in rules
.
validateTrigger
string
Event to trigger validate form rules, defaultonChange
.message
string
Default error message when a check rule reports an erroroptional
。required
boolean
The required symbol is marked, and arequired
attribute oftrue
inrules
also automatically adds the required symboloptional
。validator
(value) => void | boolean
Custom check function,value
is the current control valueoptional
.pattern
RegExp | string
Expression check, error if does not matchoptional
.whitespace
boolean
space checkoptional
.max
number
Maximum length for string type; maximum length for number type; maximum length for array typeoptional
.min
number
minimum length forstring
type; minimum value fornumber
type; minimum length forarray
type.optional
.
new FormStore(defaultValues)
form manager.form.getFieldValue(path?: string)
Returns the value of the form field for whichpath
is specified, or the value of the whole form withoutname
.form.setFieldValue(path, value)
Update the value of a form fieldform.setFieldsValue(obj: Partial<T>)
Set the value of the form field (override).form.reset(values?: Partial<T>)
Reset the form.The value can be passed to reset to the target value.form.validate(path?: string)
Checks form and returns error messages and form values.form.getFieldError(path?: string)
Returns the target's error message or all error messages.
useFormStore(defaultValues)
createFormStore
useFormError(form: FormStore, path?: string)
Use hooks to get the specified form error.- 3.0.12
useFormValues(form: FormStore, path?: string | string[])
Use hooks to get the specified form values. useValidator()
createvalidator