README
react-easy-formcore
English | 中文说明
Introduction?
Lightweight form container component where the target control only needs to provide the props
: value
(or set via valueProp
) and onChange
, leaving the rest to the component's FormStore
to manage the updating and binding of the data. Very simple to use
Matters
Note: you need to import the css style file before you can use it,example:import 'react-easy-formcore/lib/css/main.css'
;
Form.Item
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 asstore.setFieldValue
. - Custom form validation rules can be provided with the form validation rules property
rules
.
Form.List
The Form.Item
component is combined into an array as the values in `Form.
- Each item in
Form.List
is an element of an array, no need to set thename
field - The
rules
checksum rules provided byForm.List
are valid for all input items in the array, but have a lower priority than the items in the array's ownrules
rules
install
npm install react-easy-formcore --save
# 或者
yarn add react-easy-formcore
base
import React from "react";
import { Form, FormStore } from "react-easy-formcore";
import 'react-easy-formcore/lib/css/main.css';
import { Input, Select } from "antd";
class demo extends React.Component {
constructor(props) {
super(props);
this.store = new FormStore({ name1: "初始值设置" });
this.state = {};
}
onSubmit = async (e) => {
const { error, values } = await this.store.validate();
console.log(error, values, "error ang values");
};
// 自定义校验
// validator = (value) => {
// if(!value) {
// return false
// }
// return true;
// }
// 自定义校验
validator = (value, callError) => {
if (value?.length > 5) {
callError("name1 is more than 5");
}
callError();
};
render() {
return (
<Form store={this.store} onSubmit={this.onSubmit}>
<Form.Item
label="Name1"
name="name1"
rules={[{ required: true, message: "name1 is empty" }, { validator: this.validator, message: "custome tips" }]}
>
<Input />
</Form.Item>
<Form.Item
label="Name2"
name="name2"
rules={[{ required: true, message: "name2 is empty" }]}
>
<Input />
</Form.Item>
<Form.Item label="">
<button>Submit</button>
</Form.Item>
</Form>
);
}
}
Form.List
import React from "react";
import { Form, FormStore } from "react-easy-formcore";
import 'react-easy-formcore/lib/css/main.css';
import { Input, Select } from "antd";
class demo extends React.Component {
constructor(props) {
super(props);
this.store = new FormStore({ name1: "initialvalue" });
this.state = {};
}
onSubmit = async (e) => {
const { error, values } = await this.store.validate();
console.log(error, values, "error ang values");
};
// validator
// validator = (value) => {
// if(!value) {
// return false
// }
// return true;
// }
// validator
validator = (value, callError) => {
if (value?.length > 5) {
callError("Name1 is more than 5");
}
callError();
};
render() {
return (
<Form store={this.store} onSubmit={this.onSubmit}>
<Form.List name="list">
<Form.Item
rules={[
{ required: true, message: "list's one is Empty" },
{ validator: this.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>
);
}
}
APIs
base options
inline
All Form.Field components set the inline layout, default isfalse
.compact
Whether to hide error messages for all Form.required
Indicates if all Form.Field components display asterisks, not form checks, for display only, default isfalse
.labelWidth
The custom label width for all Form.labelAlign
The align of label for all Form.gutter
The distance between all Form.Field component custom labels and form components,optional
.
Form Props
Inherited base options
className
The class name of the form element,optional
.store
The form data store,required
.onSubmit
The form submit callback,optional
.onMount
The form mounted callbackoptional
.onReset
Form reset defaults,optional
.onFieldsChange
The event function when a form changes onChange will only be triggered by the control's activeonChange
, not bystore.setFieldValue
andstore.setFieldsValue
, avoiding circular calls。optional
。onValuesChange
Listening for changes in form values.optional
。onVisible
Callback function that listens to the form field component (Form.Item
) being shown or hiddenoptional
。errorClassName
All Form.Field components add a custom class name when there is an error message,optional
.
Form.Item Props
Inherited base options
className
Form field class name,optional
.label
Form field label,Optional
.name
Form field name,optional
.suffix
Suffix node,optional
.initialValue
Form field initial valueOptional
rules
Checksum rules for form fieldsOptional
.valueProp
attribute of the form value.Optional
valueGetter
The way to get the form value from the form event,Optional
.errorClassName
add a custom class name when there is an error message,optional
.
Form.List Props
Inherited base options
className
Form field class name,optional
.label
Form field label,Optional
.name
Form field name,optional
.suffix
Suffix node,optional
.initialValue
Form field initial valueOptional
rules
Checksum rules for form fieldsOptional
.
rules
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
.
message
Default error message when a check rule reports an erroroptional
。required
Indicates that the value of the field is requiredoptional
。validator
Type:(value, callback: (err: string) => void) => void | boolean
Custom check function,value
is the current control value,callback
can actively call the error reporting methodoptional
.pattern
Type:RegExp | string
Expression check, error if does not matchoptional
.whitespace
Type:boolean
For typestring
, set true check spaceoptional
.max
Type:number
Maximum length for string type; maximum length for number type; maximum length for array typeoptional
.min
Type:number
minimum length for string type; minimum value for number type; minimum length for array typeoptional
.
FormStore Methods
new FormStore(defaultValues)
form manager。store.getFieldValue()
Returns the value of the entire form.store.getFieldValue(name: string | string[])
Returns the value of a form field based on the field name. Whenname
is an array, returns the value of multiple form fieldsstore.setFieldValue(name, value)
Update the value of a form fieldstore.setFieldsValue(obj: Partial<T>)
Set the value of the form field (override).store.reset()
Reset the form.store.validate()
Checks the entire form and returns error messages and form values.store.validate(name)
Checks the value of a form field against the fieldname
and returns an error message and the form value.store.getFieldError(name?: string)
Returns error messages for a single form field or for all errors on a form.store.getFieldProps(name?: string)
Returns theprops
of a form field based on the field name
Hooks
useFormStore(defaultValues)
createFormStore