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

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

@ -33,7 +33,6 @@ const userNameControl = form.get("username");
// set values dynamically // set values dynamically
userNameControl?.setValue("RAMOOOON"); userNameControl?.setValue("RAMOOOON");
form.get("is-awesome")?.setValue("checked"); form.get("is-awesome")?.setValue("checked");
--- ---
<html lang="en"> <html lang="en">
@ -51,21 +50,23 @@ form.get("is-awesome")?.setValue("checked");
type: "submit", type: "submit",
name: "what", name: "what",
}} }}
formGroups={[form]} formGroups={form}
/> />
</body> <script>
</html> import { getFormGroup } from "astro-reactive-form/client";
<script> const form = document.querySelector("form") as HTMLFormElement;
import { getFormGroup } from "astro-reactive-form/client"; const simpleForm = getFormGroup("Simple Form");
const form = document.querySelector("form") as HTMLFormElement; form.addEventListener("submit", () => {
const simpleForm = getFormGroup("Simple Form")
form.addEventListener("submit", () => {
const username = simpleForm?.get("username")?.value; const username = simpleForm?.get("username")?.value;
const isAwesome = simpleForm?.get("is-awesome")?.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> }`
);
});
</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'; import FieldSet from './components/FieldSet.astro';
export interface Props { export interface Props {
formGroups: FormGroup | FormGroup[];
submitControl?: Submit; 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}> <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)} />} {submitControl && <Field control={new FormControl(submitControl)} />}
</form> </form>

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

@ -63,6 +63,30 @@ describe('Form.astro test', () => {
// assert // assert
expect(matches.length).to.equal(expectedCount); 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);
});
}); });
}); });