ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: update demo app and package readme

Browse source
This commit is contained in:
Ayo 2022-10-01 19:32:55 +02:00
parent d85810621b
commit 63868e4587
3 changed files with 35 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
demo/src/pages/index.astro
View file

@ -16,26 +16,22 @@ const form = new FormGroup([
form.name = "Simple Form";
// insert a control
form.controls.push(
new FormControl({
type: "checkbox",
name: "is-awesome",
label: "is Awesome?",
labelPosition: "right",
value: "checked",
})
);
form.controls.push(
new FormControl({
type: "button",
name: "set-username",
value: "set username",
})
);
// get the FormControl object
const userNameControl = form.get("username");
// set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked");
---
<html lang="en">

58
packages/astro-reactive-form/README.md
View file

@ -19,49 +19,49 @@ npm i astro-reactive-form
```astro
---
import type { FormControl, FormGroup } from 'astro-reactive-form/core';
import Form 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',
};
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([
// this is just an array of FormControl
{
name: 'first-name',
value: 'Ayo',
label: 'First Name',
name: "username",
label: "Username",
},
{
name: 'last-name',
value: 'Ayco',
label: 'Last Name',
name: "password",
label: "Password",
type: "password",
},
{
name: 'is-awesome',
type: 'checkbox',
label: 'Is Awesome?',
value: 'checked',
labelPosition: 'right',
},
radio, // the form control we declared earlier
]);
---
<Form formGroups={[form]} />
// 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");
---
```
# Screenshots
Result of example above:
![Screen Shot 2022-09-27 at 5 41 46 PM](https://user-images.githubusercontent.com/4262489/192572310-f83af2cc-53b9-4024-9ada-e64b34b66a15.png)
<img width="535" alt="Screen Shot 2022-10-01 at 7 29 00 PM" src="https://user-images.githubusercontent.com/4262489/193421174-5c604aca-7d16-4cd6-a7b1-f5b8752c838e.png">
Example of multiple form groups:

2
packages/astro-reactive-form/package.json
View file

@ -1,7 +1,7 @@
{
"name": "astro-reactive-form",
"description": "The Reactive Form component for Astro 🔥",
"version": "0.1.4",
"version": "0.1.5",
"repository": "https://github.com/ayoayco/astro-reactive-library",
"homepage": "https://github.com/ayoayco/astro-reactive-library#readme",
"author": {