114 lines
2.7 KiB
Text
114 lines
2.7 KiB
Text
---
|
|
import Layout from '../../layouts/Layout.astro'
|
|
import Footer from '../../components/Footer.astro'
|
|
|
|
import Form, { type ControlConfig, FormGroup } from '@astro-reactive/form'
|
|
import { Validators } from '@astro-reactive/validator'
|
|
|
|
const simpleForm = new FormGroup([
|
|
{
|
|
name: 'simple-text',
|
|
label: 'Simple Text Control',
|
|
},
|
|
{
|
|
name: 'email',
|
|
label: 'Email',
|
|
value: 'invalid-email',
|
|
validators: [Validators.email],
|
|
},
|
|
])
|
|
|
|
const name: ControlConfig[] = [
|
|
{
|
|
name: 'first-name',
|
|
value: 'Ayo',
|
|
label: 'First Name',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'last-name',
|
|
label: 'Last Name',
|
|
validators: [Validators.required],
|
|
},
|
|
]
|
|
|
|
const characteristics: ControlConfig[] = [
|
|
{
|
|
name: 'is-good-looking',
|
|
type: 'radio',
|
|
label: 'Is Good Looking?',
|
|
value: 'checked',
|
|
options: [
|
|
{ value: 'checked', label: 'checked' },
|
|
{ value: 'not checked', label: 'not checked' },
|
|
],
|
|
},
|
|
{
|
|
name: 'required',
|
|
label: 'Required Field',
|
|
placeholder: 'but empty 😔',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'is-awesome',
|
|
type: 'checkbox',
|
|
label: 'Is Awesome?',
|
|
value: 'checked',
|
|
},
|
|
]
|
|
|
|
const nameForm: FormGroup = new FormGroup(name, 'Name')
|
|
const characteristicsForm: FormGroup = new FormGroup(
|
|
characteristics,
|
|
'Characteristics'
|
|
)
|
|
---
|
|
|
|
<Layout
|
|
title="Astro Reactive Form"
|
|
description="Generate a dynamic form based on your data, and modify programatically"
|
|
>
|
|
<main>
|
|
<h1>Astro Reactive Form</h1>
|
|
<p>
|
|
Generate a dynamic form based on your data, and modify programatically
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
GitHub repo: <a href="https://github.com/astro-reactive/astro-reactive"
|
|
>astro-reactive</a
|
|
>
|
|
</li>
|
|
<li>
|
|
NPM registry:
|
|
<ul>
|
|
<li>
|
|
<a href="https://npmjs.org/package/@astro-reactive/form"
|
|
>@astro-reactive/form</a
|
|
>
|
|
</li>
|
|
<li>
|
|
<a href="https://npmjs.org/package/@astro-reactive/validator"
|
|
>@astro-reactive/validator</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Simple single form group</h2>
|
|
<p>Here's an example of a simple form with email validation</p>
|
|
<Form showValidationHints validateOnLoad formGroups={simpleForm} />
|
|
<!--Code lang="typescript" theme="github-light" code={simpleFormCode} /-->
|
|
|
|
<h2>Multiple Form Groups</h2>
|
|
<p>Here's a more complex example of a form with multiple fieldsets</p>
|
|
<Form
|
|
showValidationHints
|
|
validateOnLoad
|
|
formGroups={[nameForm, characteristicsForm]}
|
|
/>
|
|
<!--Code lang="typescript" theme="dark-plus" code={multipleFormGroupCode} /-->
|
|
</main>
|
|
<Footer />
|
|
</Layout>
|