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"; form.name = "Simple Form";
// insert a control
form.controls.push( form.controls.push(
new FormControl({ new FormControl({
type: "checkbox", type: "checkbox",
name: "is-awesome", name: "is-awesome",
label: "is Awesome?", label: "is Awesome?",
labelPosition: "right", 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"); const userNameControl = form.get("username");
// set values dynamically
userNameControl?.setValue("RAMOOOON"); userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked");
--- ---
<html lang="en"> <html lang="en">

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

@ -19,49 +19,49 @@ npm i astro-reactive-form
```astro ```astro
--- ---
import type { FormControl, FormGroup } from 'astro-reactive-form/core'; import { FormControl, FormGroup } from "astro-reactive-form/core";
import Form from 'astro-reactive-form'; 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',
};
// create a form group (rendered as <fieldset>)
const form = new FormGroup([ const form = new FormGroup([
// this is just an array of FormControl
{ {
name: 'first-name', name: "username",
value: 'Ayo', label: "Username",
label: 'First Name',
}, },
{ {
name: 'last-name', name: "password",
value: 'Ayco', label: "Password",
label: 'Last Name', 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 # Screenshots
Result of example above: 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: Example of multiple form groups:

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

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