Fazza Razaq Amiarso
GitHub
parent
2da037944b
commit
a002593b02
8 changed files with 94 additions and 3 deletions
|
|
@ -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");
|
||||
|
||||
---
|
||||
|
||||
<html lang="en">
|
||||
|
|
@ -54,3 +63,17 @@ form.get("is-awesome")?.setValue("checked");
|
|||
/>
|
||||
</body>
|
||||
</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
47
packages/astro-reactive-form/client/controls.ts
Normal 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
1
packages/astro-reactive-form/client/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './controls';
|
||||
|
|
@ -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' && (
|
||||
<label for={control.name}>{control.label}</label>
|
||||
)
|
||||
)
|
||||
}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ export interface Props {
|
|||
const { group } = Astro.props;
|
||||
---
|
||||
|
||||
<fieldset>
|
||||
<fieldset id={group.name} name={group.name}>
|
||||
{group.name && <legend>{group.name}</legend>}
|
||||
{group?.controls?.map((control) => <Field control={control} />)}
|
||||
</fieldset>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
],
|
||||
|
|
|
|||
Loading…
Reference in a new issue