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"; import Form from "astro-reactive-form";
const form = new FormGroup([ const form = new FormGroup([
@ -16,20 +16,26 @@ const form = new FormGroup([
form.name = "Simple Form"; form.name = "Simple Form";
form.controls.push({ form.controls.push(
type: "checkbox", new FormControl({
name: "is-awesome", type: "checkbox",
label: "is Awesome?", name: "is-awesome",
labelPosition: "right", label: "is Awesome?",
value: "checked", labelPosition: "right",
}); value: "checked",
})
);
form.controls.push({ form.controls.push(
type: "submit", new FormControl({
name: "submit", type: "button",
value: "Submit", name: "set-username",
callBack: () => console.log("hey"), value: "set username",
} as Submit); })
);
const userNameControl = form.get("username");
userNameControl?.setValue("RAMOOOON");
--- ---
<html lang="en"> <html lang="en">

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

@ -25,29 +25,78 @@ type FormControlType =
| 'url' | 'url'
| 'week'; | 'week';
export class FormControl { export interface IFormControl {
name: string = ''; name: string;
type?: FormControlType = 'text'; type?: FormControlType;
value?: string | number | null | string[]; value?: string | number | string[];
label?: 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 * TODO: Create classes for each control type
*/ */
export interface Checkbox extends FormControl { export interface Checkbox extends IFormControl {
type: 'checkbox'; type: 'checkbox';
checked: boolean; checked: boolean;
} }
export interface Radio extends FormControl { export interface Radio extends IFormControl {
type: 'checkbox'; type: 'checkbox';
checked: boolean; checked: boolean;
} }
export interface Submit extends FormControl { export interface Submit extends IFormControl {
type: 'submit'; type: 'submit';
callBack: () => void; 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 { export class FormGroup {
controls: FormControl[]; controls: FormControl[];
name?: string; name?: string;
constructor(controls: FormControl[], name?: string) { constructor(controls: IFormControl[], name: string = '') {
this.name = name || null; this.name = name;
this.controls = controls.map((control) => ({ this.controls = controls.map((control) => new FormControl(control));
...control, }
labelPosition: control.labelPosition || 'left',
})); get(name: string): FormControl | undefined {
return this.controls.find(control => control.name === name);
} }
} }