f79ce72a1c
* chore(apps): setup prettier + eslint for all our apps * fix(docs): Fixed the use of implicit any type * chore(apps): Added .eslintignore files
96 lines
1.6 KiB
Text
96 lines
1.6 KiB
Text
---
|
|
import Form, { FormGroup } from '@astro-reactive/form';
|
|
import { Validators } from '@astro-reactive/validator';
|
|
import Layout from '../components/Layout.astro';
|
|
|
|
const baseForm = new FormGroup([
|
|
{
|
|
name: 'crust',
|
|
label: 'Crust',
|
|
type: 'radio',
|
|
options: [{ label: 'Garlic', value: 'garlic' }],
|
|
},
|
|
{
|
|
name: 'size',
|
|
label: 'Size',
|
|
type: 'radio',
|
|
options: ['Small', 'Medium', 'Large'],
|
|
},
|
|
{
|
|
name: 'sauce',
|
|
label: 'Sauce',
|
|
type: 'radio',
|
|
options: ['Tomato', 'Barbeque'],
|
|
},
|
|
]);
|
|
|
|
const toppingsForm = new FormGroup([
|
|
{
|
|
name: 'mushrooms',
|
|
label: 'Mushrooms',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'extraCheese',
|
|
label: 'Extra Cheese',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'onions',
|
|
label: 'Onions',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'peppers',
|
|
label: 'Peppers',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'pepperoni',
|
|
label: 'Pepperoni',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'sausage',
|
|
label: 'Sausage',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'chicken',
|
|
label: 'Chicken',
|
|
type: 'checkbox',
|
|
},
|
|
{
|
|
name: 'pineapple',
|
|
label: 'Pineapple',
|
|
type: 'checkbox',
|
|
},
|
|
]);
|
|
|
|
const infoForm = new FormGroup([
|
|
{
|
|
name: 'name',
|
|
label: 'Name',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'address',
|
|
label: 'Delivery Address',
|
|
validators: [Validators.required],
|
|
},
|
|
{
|
|
name: 'contact',
|
|
label: 'Contact Number',
|
|
validators: [Validators.required],
|
|
},
|
|
]);
|
|
|
|
baseForm.name = 'Base';
|
|
toppingsForm.name = 'Toppings';
|
|
infoForm.name = 'Customer Info';
|
|
infoForm.get('contact')?.setValidators([Validators.minLength(9)]);
|
|
---
|
|
|
|
<Layout title="Pizza Form Demo">
|
|
<Form showValidationHints formGroups={[baseForm, toppingsForm, infoForm]} />
|
|
</Layout>
|