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

feat: implement only one submit control (#59)

Browse source 
* feat: implement submit control

* refactor: remove label
This commit is contained in:
Ayo Ayco 2022-10-06 17:57:39 +02:00 committed by GitHub
parent 96657a9c38
commit 2da037944b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 15 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -6,7 +6,7 @@ const form = new FormGroup([
{ {
name: "username", name: "username",
label: "Username", label: "Username",
placeholder: "astroIscool" placeholder: "astroIscool",
}, },
{ {
name: "password", name: "password",
@ -45,6 +45,12 @@ form.get("is-awesome")?.setValue("checked");
</head> </head>
<body> <body>
<h1>Astro Reactive Form</h1> <h1>Astro Reactive Form</h1>
<Form formGroups={[form]} /> <Form
submitControl={{
type: "submit",
name: "what",
}}
formGroups={[form]}
/>
</body> </body>
</html> </html>

7
packages/astro-reactive-form/Form.astro
View file

@ -1,18 +1,19 @@
--- ---
import type { FormControl, FormGroup } from './core'; import { Submit, FormGroup, FormControl } from './core';
import Field from './components/Field.astro'; import Field from './components/Field.astro';
import FieldSet from './components/FieldSet.astro'; import FieldSet from './components/FieldSet.astro';
export interface Props { export interface Props {
submitControl?: FormControl; submitControl?: Submit;
formGroups: FormGroup[]; formGroups: FormGroup[];
} }
const { submitControl, formGroups } = Astro.props; const { submitControl, formGroups } = Astro.props;
--- ---
<form class="light"> <form class="light">
{formGroups?.map((group) => <FieldSet group={group} />)} {formGroups?.map((group) => <FieldSet group={group} />)}
{submitControl && (<Field control={submitControl} />)} {submitControl && <Field control={new FormControl(submitControl)} />}
</form> </form>
<style> <style>

4
packages/astro-reactive-form/core/form-control-types.ts
View file

@ -46,10 +46,10 @@ export interface Radio extends FormControlBase {
export interface Submit extends FormControlBase { export interface Submit extends FormControlBase {
type: 'submit'; type: 'submit';
callBack: () => void; callBack?: () => void;
} }
export interface Button extends FormControlBase { export interface Button extends FormControlBase {
type: 'button'; type: 'button';
callBack: () => void; callBack?: () => void;
} }

1
packages/astro-reactive-form/core/index.ts
View file

@ -1,2 +1,3 @@
export * from './form-control'; export * from './form-control';
export * from './form-group'; export * from './form-group';
export * from './form-control-types';