Form Builder is a library for better FormData use in plain JavaScript.
Inspired by Angular Form Builder.
Table of Contents
To use FormBuilder, include the source files in your project:
import { FormBuilder, FormField } from '@ilyasmirnov03/form-builder';
Ensure your DOM includes a <form> element with a reachable selector.
const fb = new FormBuilder("#my-form", {
username: new FormField(""),
age: new FormField(0, (v) => parseInt(v, 10)),
});
fb.onSubmit((values) => {
console.log("Form submitted:", values);
});
fb.fields.username.onChange((newValue) => {
console.log("New value of username input:", newValue);
});Ensure that inputs inside your HTML form element have name attributes matching the keys in the FormBuilder definition.
Defined in: form-builder.ts:15
Form builder is the form-building class that holds the provided inputs together.
TFields extends Record<string, FormField<any>>
new FormBuilder<
TFields>(selector,formDefinition):FormBuilder<TFields>
Defined in: form-builder.ts:54
Constructor of the form builder class.
string
The selector of the form element.
TFields
Form definition
FormBuilder<TFields>
Error when provided selector doesn't match any element.
TypeError when found target with provided selector isn't a form element.
get fields():
TFields
Defined in: form-builder.ts:30
Get fields of form.
TFields
get target():
HTMLFormElement
Defined in: form-builder.ts:76
Get the target element.
Error if target is not available yet, i.e. == null.
HTMLFormElement
get value():
FormValues<TFields>
Defined in: form-builder.ts:37
Get value of the form.
FormValues<TFields>
onSubmit(
callback):void
Defined in: form-builder.ts:86
Subscribe to the submit event.
(value) => void
void
Defined in: form-field.ts:7
Form part is a description of an input in the FormBuilder class.
T
new FormField<
T>(value,valueTransformer?):FormField<T>
Defined in: form-field.ts:37
FormField constructor
T
Initial value.
(v) => T
This function will get called on input change with the input element value. Checkboxes inputs will send "true" or "false" and all number inputs will send the number as a stirng.
FormField<T>
get value():
T
Defined in: form-field.ts:27
Field's value getter.
T
onChange(
callback):void
Defined in: form-field.ts:72
Callback to execute on input's value change.
(value) => void
Function that will get executed with the input's new value.
void
setName(
name,form):void
Defined in: form-field.ts:48
Sets the name and the input element of this field.
string
Name of the input.
HTMLFormElement
Parent form element of the field.
void
TypeError if found form element is not of valid type.