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

feat: FormGroup.get(), FormControl.setValue()

Browse source
This commit is contained in:
Ayo 2022-10-01 19:25:08 +02:00
parent a348c7a4ed
commit d85810621b
3 changed files with 85 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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");
---
<html lang="en">

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

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

15
packages/astro-reactive-form/core/form-group.ts
View file

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