diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 0abac81..6fdb99e 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -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"); --- diff --git a/packages/astro-reactive-form/README.md b/packages/astro-reactive-form/README.md index 291cb4c..8027d13 100644 --- a/packages/astro-reactive-form/README.md +++ b/packages/astro-reactive-form/README.md @@ -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
) 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 ]); ---- -
+// set the name (rendered as ) +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) +Screen Shot 2022-10-01 at 7 29 00 PM Example of multiple form groups: diff --git a/packages/astro-reactive-form/package.json b/packages/astro-reactive-form/package.json index fe87c8e..7dfcecc 100644 --- a/packages/astro-reactive-form/package.json +++ b/packages/astro-reactive-form/package.json @@ -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": {