109 lines
3.1 KiB
Markdown
109 lines
3.1 KiB
Markdown
<p align="center">
|
|
<img src="https://raw.githubusercontent.com/astro-reactive/astro-reactive/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
|
<br />
|
|
<strong>Astro Reactive Form</strong>
|
|
<br />
|
|
Generate a dynamic form based on your data, and modify programmatically.
|
|
<br />
|
|
<br />
|
|
<a href="https://www.npmjs.com/package/@astro-reactive/form">
|
|
<img src="https://img.shields.io/npm/v/@astro-reactive/form" alt="Package information: NPM version" />
|
|
</a>
|
|
<a href="https://www.npmjs.com/package/@astro-reactive/form">
|
|
<img src="https://img.shields.io/npm/l/@astro-reactive/form" alt="Package information: NPM license" />
|
|
</a>
|
|
<a href="https://www.npmjs.com/package/@astro-reactive/form">
|
|
<img src="https://img.shields.io/npm/dt/@astro-reactive/form" alt="Package information: NPM downloads" />
|
|
</a>
|
|
<a href="https://www.npmjs.com/package/@astro-reactive/form">
|
|
<img src="https://img.shields.io/librariesio/release/npm/@astro-reactive/form" alt="Package information: NPM dependencies status" />
|
|
</a>
|
|
<br />
|
|
<br />
|
|
</p>
|
|
|
|
## Installation
|
|
In your [Astro](https://astro.build) project:
|
|
|
|
```
|
|
npm i @astro-reactive/form
|
|
```
|
|
|
|
## Usage
|
|
Use in an Astro page:
|
|
|
|
```astro
|
|
---
|
|
import Form, { FormControl, FormGroup } from "@astro-reactive/form";
|
|
|
|
// create a form group
|
|
const form = new FormGroup([
|
|
{
|
|
name: "username",
|
|
label: "Username",
|
|
},
|
|
{
|
|
name: "password",
|
|
label: "Password",
|
|
type: "password",
|
|
},
|
|
]);
|
|
|
|
// you can insert a control at any point
|
|
form.controls.push(
|
|
new FormControl({
|
|
type: "checkbox",
|
|
name: "isAwesome",
|
|
label: "is Awesome?",
|
|
})
|
|
);
|
|
|
|
// set the value of multiple controls
|
|
form.setValue({
|
|
username: 'DEFAULT',
|
|
isAwesome: 'checked',
|
|
});
|
|
|
|
// you can get a FormControl object
|
|
const userNameControl = form.get("username");
|
|
|
|
// you can set the value of specific control
|
|
userNameControl?.setValue("RAMOOOON");
|
|
|
|
---
|
|
|
|
<Form
|
|
formGroups={form}
|
|
validateOnLoad
|
|
showValidationHints
|
|
action="/submission"
|
|
method="post"
|
|
submitControl={{
|
|
name: 'submit',
|
|
type: 'submit',
|
|
}}
|
|
/>
|
|
```
|
|
|
|
👉 For more examples and explanations of the component properties, see the [Form API Docs](https://astro-reactive-docs.netlify.app/en/api/form/form-component/).
|
|
|
|
# Screenshots
|
|
Result of example above:
|
|
|
|
|
|
|
|
Example of multiple form groups:
|
|
|
|
|
|
|
|
# Validation
|
|
|
|
This Form component is designed to work with [Astro Reactive Validator](https://www.npmjs.com/package/@astro-reactive/validator), our package for setting up validators easily.
|
|
|
|
# We are opensource!
|
|
|
|
|
|
👉 _All [contributions](https://github.com/astro-reactive/astro-reactive/blob/main/CONTRIBUTING.md) are welcome. Let's make the fastest web forms powered by Astro._
|
|
|
|
👉 _This package is a work in progress. See the [change log](https://github.com/astro-reactive/astro-reactive/blob/main/packages/form/CHANGELOG.md)._
|
|
|