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

[feat]:Form control state #4 (#58)

Browse source
This commit is contained in:
Fazza Razaq Amiarso 2022-10-07 04:19:49 +07:00 committed by GitHub
parent 2da037944b
commit a002593b02
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 94 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -27,12 +27,21 @@ form.controls.push(
}) })
); );
//insert submit button
form.controls.push(
new FormControl({
type: "submit",
name: "submit",
})
);
// get the FormControl object // get the FormControl object
const userNameControl = form.get("username"); 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">
@ -54,3 +63,17 @@ form.get("is-awesome")?.setValue("checked");
/> />
</body> </body>
</html> </html>
<script>
import { getFormGroup } from "astro-reactive-form/client";
const form = document.querySelector("form") as HTMLFormElement;
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"}`)
})
</script>

47
packages/astro-reactive-form/client/controls.ts Normal file
View file

@ -0,0 +1,47 @@
import { FormControl, FormGroup } from '../core';
import type { FormControlType } from '../core/form-control-types';
export const getFormGroup = (formName: string) => {
const fieldSetEl = (document.getElementById(formName) as HTMLFieldSetElement) || null;
if (fieldSetEl === null) {
console.error(`Formgroup with name: '${formName}' doesn't exist!`);
return undefined;
}
const formGroup = new FormGroup([], formName);
fieldSetEl.querySelectorAll('input').forEach((field) => {
const formControl = getFormControl(field.name);
if (!formControl) return;
formGroup.controls.push(formControl);
});
return formGroup;
};
const getFormControl = (name: string) => {
const inputEl = document.getElementById(name) as HTMLInputElement | null;
if (inputEl === null) {
console.error(`Input with name: ${name} doesn't exist!`);
return undefined;
}
const formControl = new FormControl({
name: inputEl.name,
value: inputEl.value,
type: inputEl.type as FormControlType,
label: inputEl.dataset.label as string,
labelPosition: inputEl.dataset.labelPosition as 'right' | 'left',
});
inputEl.addEventListener('change', (e) => {
if (!(e.target instanceof HTMLInputElement)) return;
let value = e.target.value;
if (formControl.type === 'checkbox') {
value = formControl.value === 'checked' ? '' : 'checked';
}
formControl.setValue(value);
formControl.setIsPristine(false);
});
return formControl;
};

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

@ -0,0 +1 @@
export * from './controls';

4
packages/astro-reactive-form/components/Field.astro
View file

@ -22,11 +22,13 @@ const { control } = Astro.props;
value={control.value} value={control.value}
checked={control.value === 'checked'} checked={control.value === 'checked'}
placeholder={control.placeholder} placeholder={control.placeholder}
data-label={control.label}
data-label-position={control.labelPosition}
/> />
{ {
control.label && control.labelPosition === 'right' && ( control.label && control.labelPosition === 'right' && (
<label for={control.name}>{control.label}</label> <label for={control.name}>{control.label}</label>
) )
} }
</div> </div>

2
packages/astro-reactive-form/components/FieldSet.astro
View file

@ -9,7 +9,7 @@ export interface Props {
const { group } = Astro.props; const { group } = Astro.props;
--- ---
<fieldset> <fieldset id={group.name} name={group.name}>
{group.name && <legend>{group.name}</legend>} {group.name && <legend>{group.name}</legend>}
{group?.controls?.map((control) => <Field control={control} />)} {group?.controls?.map((control) => <Field control={control} />)}
</fieldset> </fieldset>

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

@ -13,6 +13,8 @@ export class FormControl {
private _value?: string | number | null | string[]; private _value?: string | number | null | string[];
private _label?: string; private _label?: string;
private _labelPosition?: 'right' | 'left' = 'left'; private _labelPosition?: 'right' | 'left' = 'left';
private _isValid = true;
private _isPristine = true;
private _placeholder?; private _placeholder?;
constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) { constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) {
@ -49,7 +51,19 @@ export class FormControl {
return this._placeholder; return this._placeholder;
} }
get isPristine() {
return this._isPristine;
}
get isValid() {
return this._isValid;
}
setValue(value: string) { setValue(value: string) {
this._value = value; this._value = value;
} }
setIsPristine(value: boolean) {
this._isPristine = value;
}
} }

2
packages/astro-reactive-form/index.ts
View file

@ -1,3 +1,5 @@
import Form from './Form.astro'; import Form from './Form.astro';
export default Form; export default Form;
export * from './core/form-control-types';
export * from './client';
export * from './Form.astro'; export * from './Form.astro';

4
packages/astro-reactive-form/package.json
View file

@ -12,11 +12,13 @@
"type": "module", "type": "module",
"exports": { "exports": {
".": "./index.ts", ".": "./index.ts",
"./core": "./core/index.ts" "./core": "./core/index.ts",
"./client": "./client/index.ts"
}, },
"files": [ "files": [
"core/", "core/",
"components/", "components/",
"client/",
"Form.astro", "Form.astro",
"index.ts" "index.ts"
], ],