manually set form or error

This commit is contained in:
cupcakearmy 2019-10-19 16:39:53 +02:00
parent d7a33baf21
commit 6274200c0b
2 changed files with 44 additions and 26 deletions

View File

@ -93,5 +93,5 @@ export const useForm = <T, U extends { [key in keyof T]: useFormValidatorParamet
[opts.setter || options.setter || 'value']: form[key] as any, [opts.setter || options.setter || 'value']: form[key] as any,
}) })
return { form, update, field, errors, isValid } return { form, update, field, errors, isValid, setForm, setErrors }
} }

View File

@ -5,37 +5,46 @@ import { useForm } from '../'
const TextError: React.FC<{ error?: string }> = ({ error }) => (!error ? null : <div className="has-text-danger">{error}</div>) const TextError: React.FC<{ error?: string }> = ({ error }) => (!error ? null : <div className="has-text-danger">{error}</div>)
const initial = {
username: '',
password: '',
type: 'formhero',
awesome: true,
}
const Index: React.FC = () => { const Index: React.FC = () => {
const { field, form, errors, isValid } = useForm( const { field, form, errors, isValid, setForm, setErrors } = useForm(initial, {
{ username: [
username: '', /^test/,
password: '', {
type: 'formhero', validator: async () => {
awesome: true, return true
},
{
username: [
/^test/,
{
validator: async () => {
return true
},
message: 'Digits please',
}, },
], message: 'Digits please',
password: {
validator: /^.{3,}$/,
message: 'To short',
}, },
awesome: value => !!value, ],
} password: {
) validator: /^.{3,}$/,
message: 'To short',
},
awesome: value => !!value,
})
const _submit = (e: React.FormEvent) => { const _submit = (e: React.FormEvent) => {
e.preventDefault() e.preventDefault()
console.log(form, errors, isValid) console.log(form, errors, isValid)
} }
const reset = () => {
setForm(initial)
}
const error = () => {
setErrors({
username: 'nope',
})
}
return ( return (
<div> <div>
<form onSubmit={_submit}> <form onSubmit={_submit}>
@ -81,12 +90,21 @@ const Index: React.FC = () => {
<button className="button" type="submit"> <button className="button" type="submit">
Go 🚀 Go 🚀
</button> </button>
<br />
<br />
<button className="button" onClick={reset}>
Reset 🔥
</button>
<br />
<br />
<button className="button" onClick={error}>
Set Error
</button>
</form> </form>
</div> </div>
) )
} }
ReactDOM.render(<Index />, document.getElementById('root')) ReactDOM.render(<Index />, document.getElementById('root'))
// @ts-ignore
// if (module.hot) module.hot.accept()