mirror of
https://github.com/cupcakearmy/formhero.git
synced 2024-12-22 08:06: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,
|
||||
})
|
||||
|
||||
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 initial = {
|
||||
username: '',
|
||||
password: '',
|
||||
type: 'formhero',
|
||||
awesome: true,
|
||||
}
|
||||
|
||||
const Index: React.FC = () => {
|
||||
const { field, form, errors, isValid } = useForm(
|
||||
{
|
||||
username: '',
|
||||
password: '',
|
||||
type: 'formhero',
|
||||
awesome: true,
|
||||
},
|
||||
{
|
||||
username: [
|
||||
/^test/,
|
||||
{
|
||||
validator: async () => {
|
||||
return true
|
||||
},
|
||||
message: 'Digits please',
|
||||
const { field, form, errors, isValid, setForm, setErrors } = useForm(initial, {
|
||||
username: [
|
||||
/^test/,
|
||||
{
|
||||
validator: async () => {
|
||||
return true
|
||||
},
|
||||
],
|
||||
password: {
|
||||
validator: /^.{3,}$/,
|
||||
message: 'To short',
|
||||
message: 'Digits please',
|
||||
},
|
||||
awesome: value => !!value,
|
||||
}
|
||||
)
|
||||
],
|
||||
password: {
|
||||
validator: /^.{3,}$/,
|
||||
message: 'To short',
|
||||
},
|
||||
awesome: value => !!value,
|
||||
})
|
||||
|
||||
const _submit = (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
console.log(form, errors, isValid)
|
||||
}
|
||||
|
||||
const reset = () => {
|
||||
setForm(initial)
|
||||
}
|
||||
|
||||
const error = () => {
|
||||
setErrors({
|
||||
username: 'nope',
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={_submit}>
|
||||
@ -81,12 +90,21 @@ const Index: React.FC = () => {
|
||||
<button className="button" type="submit">
|
||||
Go 🚀
|
||||
</button>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<button className="button" onClick={reset}>
|
||||
Reset 🔥
|
||||
</button>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
<button className="button" onClick={error}>
|
||||
Set Error ❌
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
ReactDOM.render(<Index />, document.getElementById('root'))
|
||||
|
||||
// @ts-ignore
|
||||
// if (module.hot) module.hot.accept()
|
||||
|
Loading…
Reference in New Issue
Block a user