feat: new type for control configuration ControlConfig

demo/src/pages/index.astro

@@ -1,5 +1,9 @@
 ---
-import { FormControl, FormGroup } from "astro-reactive-form/core";
+import {
+  ControlConfig,
+  FormControl,
+  FormGroup,
+} from "astro-reactive-form/core";
 import Form from "astro-reactive-form";
 
 const form = new FormGroup([
@@ -17,15 +21,15 @@ const form = new FormGroup([
 
 form.name = "Simple Form";
 
-// insert a control
-form.controls.push(
-  new FormControl({
+const config: ControlConfig = {
   type: "checkbox",
   name: "is-awesome",
   label: "is Awesome?",
   labelPosition: "right",
-  })
-);
+};
+
+// insert a control
+form.controls.push(new FormControl(config));
 
 // get the FormControl object
 const userNameControl = form.get("username");

packages/astro-reactive-form/client/controls.ts

@@ -1,10 +1,9 @@
 import { FormControl, FormGroup } from '../core';
-import type { FormControlType } from '../core/form-control-types';
+import type { ControlType } 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;
 	}
 
@@ -22,14 +21,13 @@ export const getFormGroup = (formName: string) => {
 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,
+		type: inputEl.type as ControlType,
 		label: inputEl.dataset.label as string,
 		labelPosition: inputEl.dataset.labelPosition as 'right' | 'left',
 	});
@@ -46,8 +44,6 @@ const getFormControl = (name: string) => {
 
 	const controlProxy = new Proxy(formControl, {
 		set() {
-			//prevent any setter to be able to work in client;
-			console.error('Setting this property manually is prohibited!');
 			return true;
 		},
 	});

packages/astro-reactive-form/core/form-control-types.ts

@@ -1,8 +1,8 @@
 /**
- * FormControlType - determines the type of form control
+ * ControlType - determines the type of form control
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
  */
-export type FormControlType =
+export type ControlType =
 	| 'text'
 	| 'checkbox'
 	| 'radio'
@@ -25,31 +25,33 @@ export type FormControlType =
 	| 'url'
 	| 'week';
 
-export interface FormControlBase {
+export type ControlConfig = ControlBase | Checkbox | Radio | Submit | Button;
+
+export interface ControlBase {
 	name: string;
-	type?: FormControlType;
+	type?: ControlType;
 	value?: string | number | string[];
 	label?: string;
 	labelPosition?: 'right' | 'left';
 	placeholder?: string;
 }
 
-export interface Checkbox extends FormControlBase {
+export interface Checkbox extends ControlBase {
 	type: 'checkbox';
 	checked: boolean;
 }
 
-export interface Radio extends FormControlBase {
+export interface Radio extends ControlBase {
 	type: 'radio';
 	checked: boolean;
 }
 
-export interface Submit extends FormControlBase {
+export interface Submit extends ControlBase {
 	type: 'submit';
 	callBack?: () => void;
 }
 
-export interface Button extends FormControlBase {
+export interface Button extends ControlBase {
 	type: 'button';
 	callBack?: () => void;
 }

packages/astro-reactive-form/core/form-control.ts

@@ -1,15 +1,8 @@
-import type {
-	FormControlType,
-	Button,
-	Checkbox,
-	FormControlBase,
-	Radio,
-	Submit,
-} from './form-control-types';
+import type { ControlConfig, ControlType } from './form-control-types';
 
 export class FormControl {
 	private _name = '';
-	private _type: FormControlType = 'text';
+	private _type: ControlType = 'text';
 	private _value?: string | number | null | string[];
 	private _label?: string;
 	private _labelPosition?: 'right' | 'left' = 'left';
@@ -17,7 +10,7 @@ export class FormControl {
 	private _isPristine = true;
 	private _placeholder?;
 
-	constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) {
+	constructor(config: ControlConfig) {
 		const { name, type, value, label, labelPosition, placeholder } = config;
 		this._name = name;
 		this._type = type || 'text';

packages/astro-reactive-form/core/form-group.ts

@@ -1,11 +1,11 @@
-import type { FormControlBase } from './form-control-types';
+import type { ControlBase } from './form-control-types';
 import { FormControl } from './form-control';
 
 export class FormGroup {
 	controls: FormControl[];
 	name?: string;
 
-	constructor(controls: FormControlBase[], name = '') {
+	constructor(controls: ControlBase[], name = '') {
 		this.name = name;
 		this.controls = controls
 			.filter((control) => control.type !== 'submit')