115 lines
2.3 KiB
Text
115 lines
2.3 KiB
Text
---
|
|
import Form, {
|
|
ControlConfig,
|
|
FormGroup,
|
|
FormControl,
|
|
} from "@astro-reactive/form";
|
|
import type { Submit } from "@astro-reactive/common/types";
|
|
import { Validators } from "@astro-reactive/validator";
|
|
import Layout from "../components/Layout.astro";
|
|
|
|
const form = new FormGroup([
|
|
{
|
|
name: "username",
|
|
label: "Username",
|
|
validators: [
|
|
{
|
|
validator: Validators.required,
|
|
category: "info",
|
|
},
|
|
],
|
|
},
|
|
{
|
|
name: "email",
|
|
label: "Email",
|
|
validators: [
|
|
{ validator: Validators.required },
|
|
{ validator: Validators.email, category: "warn" },
|
|
],
|
|
},
|
|
{
|
|
name: "password",
|
|
label: "Password",
|
|
type: "password",
|
|
validators: [Validators.required, Validators.minLength(8)],
|
|
},
|
|
{
|
|
name: "rating",
|
|
label: "Rating",
|
|
type: "radio",
|
|
value: "5",
|
|
options: ["1", "2", "3", "4", "5"],
|
|
},
|
|
{
|
|
name: "agreement",
|
|
label: "Agreement",
|
|
type: "radio",
|
|
value: "yes",
|
|
options: [
|
|
{ label: "Agree", value: "yes" },
|
|
{ label: "Disagree", value: "no" },
|
|
],
|
|
},
|
|
{
|
|
name: "size",
|
|
label: "Size",
|
|
type: "dropdown",
|
|
options: ["S", "M", "L", "XL", "XXL"],
|
|
placeholder: "-- Please choose an option --",
|
|
},
|
|
{
|
|
name: "comment",
|
|
label: "Feedback",
|
|
type: "textarea",
|
|
value: "Nice!",
|
|
},
|
|
{
|
|
name: "terms",
|
|
label: "Terms and Conditions",
|
|
type: "checkbox",
|
|
validators: [Validators.requiredChecked],
|
|
},
|
|
]);
|
|
|
|
form.name = "Simple Form";
|
|
|
|
const config: ControlConfig = {
|
|
type: "checkbox",
|
|
name: "is-awesome",
|
|
label: "is Awesome?",
|
|
};
|
|
|
|
// insert a control
|
|
form.controls.push(new FormControl(config));
|
|
|
|
// get the FormControl object
|
|
const userNameControl = form.get("username");
|
|
|
|
// set values dynamically
|
|
userNameControl?.setValue("RAMOOOON");
|
|
form.get("is-awesome")?.setValue("checked");
|
|
|
|
// setting an invalid value will cause errors as server-rendered
|
|
form.get("email")?.setValue("invalid-email");
|
|
|
|
// switch between light and dark mode
|
|
const title = "Form Demo";
|
|
const theme = "dark";
|
|
|
|
const submit: Submit = {
|
|
name: "submit",
|
|
type: "submit",
|
|
};
|
|
---
|
|
|
|
<Layout title={title} theme={theme}>
|
|
<Form
|
|
validateOnLoad={true}
|
|
showValidationHints={true}
|
|
formGroups={form}
|
|
theme={theme}
|
|
submitControl={submit}
|
|
action="https://localhost"
|
|
method="POST"
|
|
/>
|
|
</Layout>
|