diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index b481ea5..783f577 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -27,12 +27,21 @@ form.controls.push( }) ); +//insert submit button +form.controls.push( + new FormControl({ + type: "submit", + name: "submit", + }) +); + // get the FormControl object const userNameControl = form.get("username"); // set values dynamically userNameControl?.setValue("RAMOOOON"); form.get("is-awesome")?.setValue("checked"); + --- @@ -54,3 +63,17 @@ form.get("is-awesome")?.setValue("checked"); /> + + \ No newline at end of file diff --git a/packages/astro-reactive-form/client/controls.ts b/packages/astro-reactive-form/client/controls.ts new file mode 100644 index 0000000..a73c4f5 --- /dev/null +++ b/packages/astro-reactive-form/client/controls.ts @@ -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; +}; diff --git a/packages/astro-reactive-form/client/index.ts b/packages/astro-reactive-form/client/index.ts new file mode 100644 index 0000000..995436d --- /dev/null +++ b/packages/astro-reactive-form/client/index.ts @@ -0,0 +1 @@ +export * from './controls'; diff --git a/packages/astro-reactive-form/components/Field.astro b/packages/astro-reactive-form/components/Field.astro index 198b12f..3f8f899 100644 --- a/packages/astro-reactive-form/components/Field.astro +++ b/packages/astro-reactive-form/components/Field.astro @@ -22,11 +22,13 @@ const { control } = Astro.props; value={control.value} checked={control.value === 'checked'} placeholder={control.placeholder} + data-label={control.label} + data-label-position={control.labelPosition} /> { control.label && control.labelPosition === 'right' && ( - ) + ) } diff --git a/packages/astro-reactive-form/components/FieldSet.astro b/packages/astro-reactive-form/components/FieldSet.astro index 0f67f80..ac62bad 100644 --- a/packages/astro-reactive-form/components/FieldSet.astro +++ b/packages/astro-reactive-form/components/FieldSet.astro @@ -9,7 +9,7 @@ export interface Props { const { group } = Astro.props; --- -
+
{group.name && {group.name}} {group?.controls?.map((control) => )}
diff --git a/packages/astro-reactive-form/core/form-control.ts b/packages/astro-reactive-form/core/form-control.ts index 260e204..b427470 100644 --- a/packages/astro-reactive-form/core/form-control.ts +++ b/packages/astro-reactive-form/core/form-control.ts @@ -13,6 +13,8 @@ export class FormControl { private _value?: string | number | null | string[]; private _label?: string; private _labelPosition?: 'right' | 'left' = 'left'; + private _isValid = true; + private _isPristine = true; private _placeholder?; constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) { @@ -49,7 +51,19 @@ export class FormControl { return this._placeholder; } + get isPristine() { + return this._isPristine; + } + + get isValid() { + return this._isValid; + } + setValue(value: string) { this._value = value; } + + setIsPristine(value: boolean) { + this._isPristine = value; + } } diff --git a/packages/astro-reactive-form/index.ts b/packages/astro-reactive-form/index.ts index 080add5..0c9b0b8 100644 --- a/packages/astro-reactive-form/index.ts +++ b/packages/astro-reactive-form/index.ts @@ -1,3 +1,5 @@ import Form from './Form.astro'; export default Form; +export * from './core/form-control-types'; +export * from './client'; export * from './Form.astro'; diff --git a/packages/astro-reactive-form/package.json b/packages/astro-reactive-form/package.json index eed8636..3b1dd35 100644 --- a/packages/astro-reactive-form/package.json +++ b/packages/astro-reactive-form/package.json @@ -12,11 +12,13 @@ "type": "module", "exports": { ".": "./index.ts", - "./core": "./core/index.ts" + "./core": "./core/index.ts", + "./client": "./client/index.ts" }, "files": [ "core/", "components/", + "client/", "Form.astro", "index.ts" ],