mirror of
https://github.com/cupcakearmy/formhero.git
synced 2024-12-22 16:16:24 +00:00
manually set form or error
This commit is contained in:
parent
d7a33baf21
commit
6274200c0b
@ -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 }
|
||||||
}
|
}
|
||||||
|
@ -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()
|
|
||||||
|
Loading…
Reference in New Issue
Block a user