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 formGroup={form} />

Future Plans

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

1. 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
2. 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

... and so much more

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