0.1.2 • Published 5 years ago
@react-efficiency/form-util v0.1.2
@react-efficiency/form-util
Abstract form class
Role
- Form basic validation, such as length, required, regular expression validation
- Dynamic verification, you can add errors based on server information
- The value of the form is obtained
- Form data and components are completely separated
- Pure function, generic, not necessarily used in react
Installation
yarnyarn add @react-efficiency/form-util
npmnpm install @react-efficiency/form-util --save
Simple example
import * as React from 'react'
import {
FormArrayUtil,
FormControlUtil,
FormGroupUtil,
isNumber,
maxLength,
need,
regExp,
regExpReverse,
setLocalization,
} from '@react-efficiency/form-util'
import {
Form,
FormControl,
FowRow,
IFormControlProps,
} from '@react-efficiency/form'
interface IProps extends IFormControlProps {
control: FormControlUtil
onChange: any
}
const cardStyle = {
border: '1px solid #d0d0d0',
borderRadius: 5,
padding: 10,
width: 360,
boxShadow: '1px 1px 5px 1px #d0d0d0',
}
function FormItem(props: IProps) {
const onChange = (e: any) => props.onChange(e, props.control)
return (
<FormControl
{...props}
error={props.control.error}
label={props.control.label}
>
<input
type={'text'}
value={props.control.getValue()}
onChange={onChange}
style={{ borderRadius: 3, padding: 4 }}
/>
</FormControl>
)
}
export class Base extends React.Component<any> {
public state: {
form: FormGroupUtil
}
public height = 50
constructor(props: any) {
super(props)
const form = new FormGroupUtil({
name: new FormControlUtil(
[
need(),
maxLength(4),
regExpReverse(/\d/g, "[label] can't contain numbers"),
],
'Job',
'name',
),
age: new FormControlUtil(
[need(), regExp(/^\d+$/, 'Must be a number')],
'',
'age',
),
family: new FormArrayUtil([]),
university: new FormGroupUtil({
name: new FormControlUtil(
[need(), maxLength(40)],
'xxx University',
'University name',
),
address: new FormControlUtil(
[need(), maxLength(40)],
'xxx address',
'University address',
),
}),
})
this.state = {
form,
}
}
public onChange = (
e: React.ChangeEvent<HTMLInputElement>,
control: FormControlUtil,
) => {
control.setValue(e.target.value)
this.setState(this.state)
}
public submit = () => {
this.state.form.verify()
this.setState(this.state)
console.log(this.state.form.getValue())
console.log('All data verification:', this.state.form.pass)
}
public addError = () => {
setTimeout(() => {
;(this.state.form.get('name') as FormControlUtil).setError(
'Duplicate name',
)
this.setState(this.state)
}, 1000)
}
public addFamily = () => {
;(this.state.form.get('family') as FormArrayUtil).config.push(
new FormGroupUtil({
name: new FormControlUtil([need(), maxLength(4)], '', 'Name'),
type: new FormControlUtil([need()], '', 'Relationship'),
age: new FormControlUtil([need(), isNumber()], '', 'Age'),
}),
)
this.setState(this.state)
}
public deleteFamily = (index: number) => () => {
;(this.state.form.get('family') as FormArrayUtil).config.splice(index, 1)
this.setState(this.state)
}
public setFormValue = () => {
this.state.form.setValue({
name: 'dddd',
age: 27,
university: { name: 'HAHA University' },
})
this.setState(this.state)
}
public render() {
const card = cardStyle
return (
<Form formControlProps={{ height: this.height }}>
<FormItem
control={this.state.form.get('name')}
onChange={this.onChange}
/>
<FormItem
control={this.state.form.get('age')}
onChange={this.onChange}
/>
<FormControl label={'Family staff'}>
<div>
{(this.state.form.get('family') as FormArrayUtil).config.map(
(group: FormGroupUtil, index: number) => {
return (
<div key={index} style={{ marginBottom: 10 }}>
<div key={index} style={card}>
<FormItem
height={this.height}
control={group.get('name')}
onChange={this.onChange}
/>
<FormItem
height={this.height}
control={group.get('age')}
onChange={this.onChange}
/>
<FormItem
height={this.height}
control={group.get('type')}
onChange={this.onChange}
/>
<button onClick={this.deleteFamily(index)}>delete</button>
</div>
</div>
)
},
)}
</div>
<button onClick={this.addFamily}>Add a family member</button>
</FormControl>
<FormControl label={'University'}>
<div style={card}>
<FormItem
height={this.height}
control={this.state.form.getIn(['university', 'name'])}
onChange={this.onChange}
/>
<FormItem
height={this.height}
control={this.state.form.getIn(['university', 'address'])}
onChange={this.onChange}
/>
</div>
</FormControl>
<FowRow>
<button onClick={this.submit}>submit</button>
<button onClick={this.addError}>add error</button>
<button onClick={this.setFormValue}>set form data</button>
</FowRow>
</Form>
)
}
}