ayo/astro-reactive-form
ayo/astro-reactive-form
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: Form control placeholder attribute (#48)

Browse source 
* 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>
This commit is contained in:
Fazza Razaq Amiarso 2022-10-05 23:30:47 +07:00 committed by GitHub
parent 3c1ab5c40e
commit a8bfaaa964
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
demo/src/pages/index.astro
View file

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

1
packages/astro-reactive-form/components/Field.astro
View file

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

8
packages/astro-reactive-form/core/form-control.ts
View file

@ -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;
}

1
packages/astro-reactive-form/types.ts
View file

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