docs: update example in form readme (#258)

* docs: update example in form readme

* chore: update readme

* chore: update validator readme

apps/demo/src/pages/index.astro

@@ -33,7 +33,6 @@ const form = new FormGroup([
 		name: 'rating',
 		label: 'Rating',
 		type: 'radio',
-		value: '5',
 		options: ['1', '2', '3', '4', '5'],
 	},
 	{
@@ -71,19 +70,22 @@ form.name = 'Simple Form';
 
 const config: ControlConfig = {
 	type: 'checkbox',
-	name: 'is-awesome',
+	name: 'isAwesome',
 	label: 'is Awesome?',
 };
 
 // insert a control
 form.controls.push(new FormControl(config));
 
-// get the FormControl object
+// set the value of multiple controls
-const userNameControl = form.get('username');
+form.setValue({
+	username: 'RAMOOOON',
+	isAwesome: 'checked',
+});
 
-// set values dynamically
+// set the value of a specific control
-userNameControl?.setValue('RAMOOOON');
+const ratingControl = form.get('rating');
-form.get('is-awesome')?.setValue('checked');
+ratingControl?.setValue('5');
 
 // setting an invalid value will cause errors as server-rendered
 form.get('email')?.setValue('invalid-email');

packages/form/README.md

@@ -49,40 +49,44 @@ const form = new FormGroup([
   },
 ]);
 
-// 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",
+    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 values dynamically
+// you can set the value of specific control
 userNameControl?.setValue("RAMOOOON");
-form.get('is-awesome')?.setValue("checked");
+
 ---
 
 <Form
   formGroups={form}
+  validateOnLoad
+  showValidationHints
+  action="/submission"
+  method="post"
   submitControl={{
-    type: "submit",
+    name: 'submit',
-    name: "submit",
+    type: 'submit',
   }}
 />
-<!-- 
-  The `formGroups` attribute can take a single FormGroup
-  or an array of FormGroup for multiple fieldset blocks;
-  we are using a single FormGroup for now in this example.
--->
 ```
 
+👉 For more examples and explanations of the component properties, see the [Form API Docs](https://docs.astro-reactive.dev/en/api/form/form-component/).
+
 # Screenshots
 Result of example above:
 

packages/validator/README.md

@@ -80,6 +80,8 @@ form.controls.push(
 -->
 ```
 
+👉 For more examples and explanations of the component properties, see the [Validators API Docs](https://docs.astro-reactive.dev/en/api/validator/validators/).
+
 # Screenshots
 
 ![Screen Shot 2022-10-15 at 1 31 11 PM](https://user-images.githubusercontent.com/4262489/195984173-c19e8cf0-bc55-41d5-8267-e3de44c6bf64.png)