-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.tsx
53 lines (48 loc) · 1.5 KB
/
index.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import { Component } from 'solid-js';
import { useFormHandler } from '@hooks';
import { yupSchema } from '@adapters';
import { TextInput } from '@example-components';
import * as yup from 'yup';
export type Schema = { name: string; email: string };
export const schema: yup.Schema<Schema> = yup.object({
name: yup.string().required('Required field'),
email: yup.string().email().required('Required field'),
});
export const ValidateOnImpl: Component = () => {
const formHandler = useFormHandler(yupSchema(schema), {
validateOn: ['blur'],
});
const { formData } = formHandler;
const submit = async (event: Event) => {
event.preventDefault();
try {
await formHandler.validateForm();
alert(JSON.stringify(formData()));
formHandler.resetForm();
} catch (error) {
console.error(error);
}
};
return (
<>
<form onSubmit={submit}>
<div class="row gy-3">
<div class="col-sm-12 col-md-6">
<TextInput label="Name" name="name" formHandler={formHandler} />
</div>
<div class="col-sm-12 col-md-6">
<TextInput label="Email" name="email" formHandler={formHandler} />
</div>
</div>
<div class="mb-3 w-100">
<button disabled={formHandler.isFormInvalid()} class="btn btn-primary me-2 mt-2">
Submit
</button>
</div>
<pre>
<code>{JSON.stringify(formHandler._.getFormState(), null, 2)}</code>
</pre>
</form>
</>
);
};