86 lines
1.8 KiB
Text
86 lines
1.8 KiB
Text
---
|
|
import Layout from "../../layouts/Layout.astro";
|
|
import Footer from "../../components/Footer.astro";
|
|
import Back from "../../components/Back.astro";
|
|
import { FormControl, FormGroup } from "astro-reactive-form/core";
|
|
import Form from "astro-reactive-form";
|
|
|
|
const simpleForm = new FormGroup([
|
|
{
|
|
name: "simple-text",
|
|
label: "Simple Text Control",
|
|
},
|
|
{
|
|
name: "a-checkbox",
|
|
label: "A Checkbox with Label on the left",
|
|
type: "checkbox",
|
|
value: "checked",
|
|
},
|
|
]);
|
|
|
|
const name: FormControl[] = [
|
|
{
|
|
name: "first-name",
|
|
value: "Ayo",
|
|
label: "First Name",
|
|
},
|
|
{
|
|
name: "last-name",
|
|
value: "Ayco",
|
|
label: "Last Name",
|
|
},
|
|
];
|
|
|
|
const characteristics: FormControl[] = [
|
|
{
|
|
name: "is-good-looking",
|
|
type: "radio",
|
|
label: "Is Good Looking?",
|
|
value: "checked",
|
|
labelPosition: "right",
|
|
},
|
|
{
|
|
name: "is-awesome",
|
|
type: "checkbox",
|
|
label: "Is Awesome?",
|
|
value: "checked",
|
|
labelPosition: "right",
|
|
},
|
|
];
|
|
|
|
const nameForm: FormGroup = new FormGroup(name, "Name");
|
|
const characteristicsForm: FormGroup = new FormGroup(
|
|
characteristics,
|
|
"Characteristics"
|
|
);
|
|
---
|
|
|
|
<Layout title="Ayo Ayco | Showcase | Astro Reactive Form">
|
|
<main>
|
|
<Back url="/showcase" />
|
|
<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/ayoayco/astro-reactive-library"
|
|
>astro-reactive-library</a
|
|
>
|
|
</li>
|
|
<li>
|
|
NPM registry: <a href="https://npmjs.org/astro-reactive-form"
|
|
>astro-reactive-form</a
|
|
>
|
|
</li>
|
|
</ul>
|
|
|
|
<h2>Simple single form group</h2>
|
|
<Form formGroups={simpleForm} />
|
|
|
|
<h2>Multiple Form Groups</h2>
|
|
<Form formGroups={[nameForm, characteristicsForm]} />
|
|
|
|
<Footer />
|
|
</main>
|
|
</Layout>
|