0.2.1 • Published 3 years ago

astro-reactive-form v0.2.1

Weekly downloads
-
License
ISC
Repository
github
Last release
3 years ago

Astro Reactive Form 🔥

npm npm npm github

The Reactive Form component for Astro 🔥

All contributions are welcome.

Installation

npm i astro-reactive-form

Usage

---
import { FormControl, FormGroup } from "astro-reactive-form/core";
import Form from "astro-reactive-form";

// create a form group (rendered as <fieldset>)
const form = new FormGroup([
  {
    name: "username",
    label: "Username",
  },
  {
    name: "password",
    label: "Password",
    type: "password",
  },
]);

// set the name (rendered as <legend>)
form.name = "Simple Form";

// insert a control
form.controls.push(
  new FormControl({
    type: "checkbox",
    name: "is-awesome",
    label: "is Awesome?",
    labelPosition: "right",
  })
);

// get a FormControl object
const userNameControl = form.get("username");

// set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get('is-awesome')?.setValue("checked");
---

<!-- the formGroups attribute takes an array of FormGroup-->
<Form formGroups={[form]} />

Screenshots

Result of example above:

Example of multiple form groups:

Screen Shot 2022-09-27 at 10 44 03 PM

Future Plans

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

  1. Validator library for common validation scenarios
    1. Client-side validation
    2. Server-side validation
    3. validation hooks - onFocus, onBlur, onSubmit
  2. Themes - unstyled, light mode, dark mode, compact, large
  3. 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
  4. 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

0.2.1

3 years ago

0.2.0

3 years ago

0.1.5

3 years ago

0.1.4

3 years ago

0.1.3

3 years ago

0.1.1

3 years ago

0.1.0

3 years ago

0.0.10

3 years ago

0.0.9

3 years ago

0.0.8

3 years ago

0.0.7

3 years ago

0.0.5

3 years ago

0.0.4

3 years ago

0.0.3

3 years ago

0.0.2

3 years ago

0.0.1

3 years ago