diff --git a/demo/src/pages/index.astro b/demo/src/pages/index.astro index 2dd05df..0abac81 100644 --- a/demo/src/pages/index.astro +++ b/demo/src/pages/index.astro @@ -1,5 +1,5 @@ --- -import { FormGroup, Submit } from "astro-reactive-form/core"; +import { FormControl, FormGroup } from "astro-reactive-form/core"; import Form from "astro-reactive-form"; const form = new FormGroup([ @@ -16,20 +16,26 @@ const form = new FormGroup([ form.name = "Simple Form"; -form.controls.push({ - type: "checkbox", - name: "is-awesome", - label: "is Awesome?", - labelPosition: "right", - value: "checked", -}); +form.controls.push( + new FormControl({ + type: "checkbox", + name: "is-awesome", + label: "is Awesome?", + labelPosition: "right", + value: "checked", + }) +); -form.controls.push({ - type: "submit", - name: "submit", - value: "Submit", - callBack: () => console.log("hey"), -} as Submit); +form.controls.push( + new FormControl({ + type: "button", + name: "set-username", + value: "set username", + }) +); + +const userNameControl = form.get("username"); +userNameControl?.setValue("RAMOOOON"); --- diff --git a/packages/astro-reactive-form/core/form-control.ts b/packages/astro-reactive-form/core/form-control.ts index 6d3edf6..3f9d823 100644 --- a/packages/astro-reactive-form/core/form-control.ts +++ b/packages/astro-reactive-form/core/form-control.ts @@ -25,29 +25,78 @@ type FormControlType = | 'url' | 'week'; -export class FormControl { - name: string = ''; - type?: FormControlType = 'text'; - value?: string | number | null | string[]; +export interface IFormControl { + name: string; + type?: FormControlType; + value?: string | number | string[]; label?: string; - labelPosition?: 'right' | 'left' = 'left'; + labelPosition?: 'right' | 'left'; +} + + +export class FormControl { + private _name: string = ''; + private _type?: FormControlType | undefined = 'text'; + private _value?: string | number | null | string[]; + private _label?: string; + private _labelPosition?: 'right' | 'left' = 'left'; + + constructor(config: IFormControl | Checkbox | Radio | Submit | Button) { + const { name, type, value, label, labelPosition } = config; + this._name = name; + this._type = type || 'text'; + this._value = value || null; + this._label = label || ''; + this._labelPosition = labelPosition || 'left'; + } + + get name() { + return this._name; + } + + get type() { + return this._type; + } + + get value() { + return this._value; + } + + get label() { + return this._label; + } + + get labelPosition() { + return this._labelPosition; + } + + setValue(value: string) { + this._value = value; + } + } /** * TODO: Create classes for each control type */ -export interface Checkbox extends FormControl { +export interface Checkbox extends IFormControl { type: 'checkbox'; checked: boolean; } -export interface Radio extends FormControl { +export interface Radio extends IFormControl { type: 'checkbox'; checked: boolean; } -export interface Submit extends FormControl { +export interface Submit extends IFormControl { type: 'submit'; callBack: () => void; } + +export interface Button extends IFormControl { + type: 'button'; + callBack: () => void; +} + diff --git a/packages/astro-reactive-form/core/form-group.ts b/packages/astro-reactive-form/core/form-group.ts index 92a3286..8e5618b 100644 --- a/packages/astro-reactive-form/core/form-group.ts +++ b/packages/astro-reactive-form/core/form-group.ts @@ -1,14 +1,15 @@ -import { FormControl } from './form-control'; +import { FormControl, IFormControl } from './form-control'; export class FormGroup { controls: FormControl[]; name?: string; - constructor(controls: FormControl[], name?: string) { - this.name = name || null; - this.controls = controls.map((control) => ({ - ...control, - labelPosition: control.labelPosition || 'left', - })); + constructor(controls: IFormControl[], name: string = '') { + this.name = name; + this.controls = controls.map((control) => new FormControl(control)); + } + + get(name: string): FormControl | undefined { + return this.controls.find(control => control.name === name); } }