<script lang="ts">
import { Errors, faivform, Field } from "@tuentyfaiv/svelte-form";
import { adapter } from "@faivform/yup";
import { object, string, number } from "yup";
import type { InferType } from "yup";
const schema = object({
name: string().required("Name is required"),
age: number()
.required("Age is required")
.positive("Age must be positive")
.integer("Age must be an integer"),
email: string().email().required("Email is required"),
});
type Schema = typeof schema;
type Fields = InferType<Schema>;
const form = faivform<Schema, Fields>({
fields: adapter(schema),
});
const onSubmit = $form.submit((values) => {
console.log(values);
});
</script>
<form on:submit|preventDefault={onSubmit}>
<Field name="name" label="Name:" />
<Field name="age" label="Age:" type="number" />
<Field name="email" label="Email:" type="email" />
<Errors />
<button type="submit"> Submit </button>
</form>