4dc020027f
* feat: initial validator component * chore: fix eslint for validator * chore: update package info for validator * chore: remove vscode settings for docs * chore: put docs and demo into apps * chore: move package scope @astro-reactive * test: update tests for validator * feat: validator functions, hooks * feat: validator sets haserrors attribute * feat: use data-validator attributes * feat: showValidationHints * feature: add logic for all validators * refactor: remove Validator component usage * docs(validator): initial readme * chore: comment out unsupported validator * docs(validator): update installation * chore: package docs and publish * chore: update deps * docs: update npm info on docs * docs(validator): update docs for validator * fix(form): handle undefined form * test(validator): update tests * chore: organize files; update deps * chore: fix build scripts
107 lines
2.9 KiB
Markdown
107 lines
2.9 KiB
Markdown
<p align="center">
|
|
<img src="https://raw.githubusercontent.com/ayoayco/astro-reactive-library/main/.github/assets/logo/min-banner.png" alt="Astro Reactive Library Logo">
|
|
<strong>Astro Reactive Form</strong>
|
|
<br />
|
|
Generate a dynamic form based on your data, and modify programatically.
|
|
<br />
|
|
<br />
|
|
<img src="https://img.shields.io/npm/v/@astro-reactive/form" />
|
|
<img src="https://img.shields.io/npm/l/@astro-reactive/form" />
|
|
<img src="https://img.shields.io/npm/dt/@astro-reactive/form" />
|
|
<img src="https://img.shields.io/librariesio/release/npm/@astro-reactive/form" />
|
|
<br />
|
|
<br />
|
|
</p>
|
|
|
|
## Installation
|
|
In your [Astro](https://astro.build) project:
|
|
|
|
```
|
|
npm i @astro-reactive/form
|
|
```
|
|
|
|
## Usage
|
|
Use in an Astro page:
|
|
|
|
```astro
|
|
---
|
|
import { FormControl, FormGroup } from "@astro-reactive/form/core";
|
|
import Form from "@astro-reactive/form";
|
|
|
|
// create a form group
|
|
const form = new FormGroup([
|
|
{
|
|
name: "username",
|
|
label: "Username",
|
|
},
|
|
{
|
|
name: "password",
|
|
label: "Password",
|
|
type: "password",
|
|
},
|
|
]);
|
|
|
|
// set the name optionally
|
|
form.name = "Simple Form";
|
|
|
|
// you can insert a control at any point
|
|
form.controls.push(
|
|
new FormControl({
|
|
type: "checkbox",
|
|
name: "is-awesome",
|
|
label: "is Awesome?",
|
|
labelPosition: "right",
|
|
})
|
|
);
|
|
|
|
// you can get a FormControl object
|
|
const userNameControl = form.get("username");
|
|
|
|
// you can set values dynamically
|
|
userNameControl?.setValue("RAMOOOON");
|
|
form.get('is-awesome')?.setValue("checked");
|
|
---
|
|
|
|
<!--
|
|
the `formGroups` attribute can take a single FormGroup
|
|
or an array of FormGroup for multiple fieldsets;
|
|
we do a single for now in this example
|
|
-->
|
|
<Form
|
|
formGroups={form}
|
|
submitControl={{
|
|
type: "submit",
|
|
name: "submit",
|
|
}}
|
|
/>
|
|
```
|
|
|
|
# Screenshots
|
|
Result of example above:
|
|
|
|
|
|
|
|
Example of multiple form groups:
|
|
|
|
|
|
|
|
# Validation
|
|
|
|
See our [package for setting up validators](https://www.npmjs.com/package/@astro-reactive/validator).
|
|
|
|
# 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
|
|
1. FormGroup class
|
|
1. `statusChanges` - observable that emits the form status when it changes
|
|
1. `valueChanges` - observable that emits the values of all controls when they change
|
|
1. FormControl class
|
|
1. `statusChanges` - observable that emits the control status when it changes
|
|
1. `valueChanges` - observable that emits the control value when it changes
|
|
1. Documentation website
|
|
|
|
... and so much more
|
|
|
|
_All contributions are welcome. Let's make the fastest web form component powered by Astro_
|