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,15 +5,15 @@ 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 Index: React.FC = () => { const initial = {
const { field, form, errors, isValid } = useForm(
{
username: '', username: '',
password: '', password: '',
type: 'formhero', type: 'formhero',
awesome: true, awesome: true,
}, }
{
const Index: React.FC = () => {
const { field, form, errors, isValid, setForm, setErrors } = useForm(initial, {
username: [ username: [
/^test/, /^test/,
{ {
@ -28,14 +28,23 @@ const Index: React.FC = () => {
message: 'To short', message: 'To short',
}, },
awesome: value => !!value, 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()