diff --git a/apps/demo/src/pages/index.astro b/apps/demo/src/pages/index.astro index 6a25438..fc7daa0 100644 --- a/apps/demo/src/pages/index.astro +++ b/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 -const userNameControl = form.get('username'); +// set the value of multiple controls +form.setValue({ + username: 'RAMOOOON', + isAwesome: 'checked', +}); -// set values dynamically -userNameControl?.setValue('RAMOOOON'); -form.get('is-awesome')?.setValue('checked'); +// set the value of a specific control +const ratingControl = form.get('rating'); +ratingControl?.setValue('5'); // setting an invalid value will cause errors as server-rendered form.get('email')?.setValue('invalid-email'); diff --git a/packages/form/README.md b/packages/form/README.md index ba29286..2604de3 100644 --- a/packages/form/README.md +++ b/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"); + ---
- ``` +👉 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: diff --git a/packages/validator/README.md b/packages/validator/README.md index 1854ce8..a9eef9f 100644 --- a/packages/validator/README.md +++ b/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)