Astro Reactive Form 🔥

The Reactive Form component for Astro 🔥

All contributions are welcome.

Installation

npm i astro-reactive-form

Usage

---
import Form, { FormControl, FormGroup } from 'astro-reactive-form';

// example of a form control
const radio: FormControl = {
  name: 'is-good-looking',
  type: 'radio',
  label: 'Is Good Looking?',
  value: 'checked',
  labelPosition: 'right',
};

const form = new FormGroup([
  // this is just an array of FormControl
  {
    name: 'first-name',
    value: 'Ayo',
    label: 'First Name',
  },
  {
    name: 'last-name',
    value: 'Ayco',
    label: 'Last Name',
  },
  {
    name: 'is-awesome',
    type: 'checkbox',
    label: 'Is Awesome?',
    value: 'checked',
    labelPosition: 'right',
  },
  radio, // the form control we declared earlier
]);
---

<Form formGroups={[form]} />

Screenshots

Result of example above:

Example of multiple form groups:

Future Plans

Currently this only supports very basic form creation, but the goal of the project is ambitious:

1. Themes - unstyled, light mode, dark mode, compact, large
2. FormGroup class
   1. get(controlName: string) - returns the FormControl with matching name
   2. statusChanges - observable that emits the form status when it changes
   3. valueChanges - observable that emits the values of all controls when they change
3. FormControl class
   1. setValue(value) - set the value of the control programmatically
   2. statusChanges - observable that emits the control status when it changes
   3. valueChanges - observable that emits the control value when it changes
   4. value - property that reflects the control value
4. Validator library for common validation scenarios

... and so much more

All contributions are welcome. Let's make the fastest web form component powered by Astro