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

feat: support single form group (#71)

Browse source
This commit is contained in:
Ayo Ayco 2022-10-08 22:29:08 +02:00 committed by GitHub
parent 1491135302
commit 0acc1968c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -33,7 +33,6 @@ const userNameControl = form.get("username");
// set values dynamically
userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked");
---
<html lang="en">
@ -51,21 +50,23 @@ form.get("is-awesome")?.setValue("checked");
type: "submit",
name: "what",
}}
formGroups={[form]}
formGroups={form}
/>
</body>
</html>
<script>
import { getFormGroup } from "astro-reactive-form/client";
const form = document.querySelector("form") as HTMLFormElement;
const simpleForm = getFormGroup("Simple Form")
const simpleForm = getFormGroup("Simple Form");
form.addEventListener("submit", () => {
const username = simpleForm?.get("username")?.value;
const isAwesome = simpleForm?.get("is-awesome")?.value;
alert(`Hi, My username is ${username}. This Library is ${isAwesome === "checked" ? "awesome" : "not awesome"}`)
})
alert(
`Hi, My username is ${username}. This Library is ${
isAwesome === "checked" ? "awesome" : "not awesome"
}`
);
});
</script>
</body>
</html>

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

@ -4,18 +4,22 @@ import Field from './components/Field.astro';
import FieldSet from './components/FieldSet.astro';
export interface Props {
formGroups: FormGroup | FormGroup[];
submitControl?: Submit;
formGroups: FormGroup[];
theme?: "light" | "dark";
theme?: 'light' | 'dark';
}
const { submitControl, formGroups, theme } = Astro.props;
const { submitControl, formGroups: form, theme } = Astro.props;
const formTheme = theme ?? "light";
const formTheme = theme ?? 'light';
---
<form class={formTheme}>
{formGroups?.map((group) => <FieldSet group={group} />)}
{
Array.isArray(form)
? form?.map((group) => <FieldSet group={group} />)
: form?.controls.map((control) => <Field control={control} />)
}
{submitControl && <Field control={new FormControl(submitControl)} />}
</form>

24
packages/astro-reactive-form/test/Form.astro.test.js
View file

@ -63,6 +63,30 @@ describe('Form.astro test', () => {
// assert
expect(matches.length).to.equal(expectedCount);
});
it('Should not render a fieldset for a single form group', async () => {
// arrange
const expectedCount = 0;
const element = /<fieldset>/g;
const fakeFormGroup = {
controls: [
{
type: 'checkbox',
name: 'fake-checkbox',
label: 'FAKE CHECKBOX',
},
],
};
const props = { formGroups: fakeFormGroup };
component = await getComponentOutput('./Form.astro', props);
// act
const actualResult = cleanString(component.html);
const matches = actualResult.match(element) || [];
// assert
expect(matches.length).to.equal(expectedCount);
});
});
});