feat: Form control placeholder attribute (#48)

* feat: Add placeholder attribute

* fix: remove wrong interface

* fix: fix spacing issue

Co-authored-by: Ayo Ayco <ramon.aycojr@gmail.com>

Co-authored-by: Ayo Ayco <ramon.aycojr@gmail.com>

demo/src/pages/index.astro

@@ -6,6 +6,7 @@ const form = new FormGroup([
   {
     name: "username",
     label: "Username",
+    placeholder: "astroIscool"
   },
   {
     name: "password",

packages/astro-reactive-form/components/Field.astro

@@ -21,6 +21,7 @@ const { control } = Astro.props;
 		type={control.type}
 		value={control.value}
 		checked={control.value === 'checked'}
+		placeholder={control.placeholder}
 	/>
 
 	{

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

@@ -6,14 +6,16 @@ export class FormControl {
 	private _value?: string | number | null | string[];
 	private _label?: string;
 	private _labelPosition?: 'right' | 'left' = 'left';
+	private _placeholder?;
 
 	constructor(config: FormControlBase | Checkbox | Radio | Submit | Button) {
-		const { name, type, value, label, labelPosition } = config;
+		const { name, type, value, label, labelPosition, placeholder } = config;
 		this._name = name;
 		this._type = type || 'text';
 		this._value = value || null;
 		this._label = label || '';
 		this._labelPosition = labelPosition || 'left';
+		this._placeholder = placeholder || ""
 	}
 
 	get name() {
@@ -36,6 +38,10 @@ export class FormControl {
 		return this._labelPosition;
 	}
 
+	get placeholder() {
+		return this._placeholder;
+	}
+
 	setValue(value: string) {
 		this._value = value;
 	}

packages/astro-reactive-form/types.ts

@@ -31,6 +31,7 @@ export interface FormControlBase {
 	value?: string | number | string[];
 	label?: string;
 	labelPosition?: 'right' | 'left';
+	placeholder? : string
 }
 
 export interface Checkbox extends FormControlBase {