solar-forms
v0.0.5TypeScript
Form library for SolidJS inspired by Angular's reactive forms
0/weekUpdated 3 years agoMITUnpacked: 164.1 KB
Published by Kajetan Świątek
npm install solar-forms
Solar Forms
Forms library for SolidJS
inspired by Angular's reactive forms.
``tsx
import { createFormGroup, formGroup, Validators as V } from 'solar-forms';
const Registration = ({ onSubmit }: Props) => {
const fg = createFormGroup({
email: ['', { validators: [V.required] }],
name: '',
password: ['', { validators: [V.required] }],
acceptTerms: [false, { validators: [V.is(true)] }]
});
const [form, setForm] = fg.value;
const validAll = fg.validAll;
return (
<>
);
};
`
About
Solar Forms allows you to create reactive and type-safe state for your form controls. It lets you take over
form controls and access key information like control's current value, whether it's disabled, valid, etc.
as SolidJS signals. Form controls can also be pre-configured with validator functions, ensuring your
form won't be marked as valid unless all data is correct.
> ### ⚠️ This library is still in very early stages of development. It is not encouraged to use it in production applications. Although we encourage you to try it out and give some feedback!
Features
- Create form group as a set of related controls that you can manage.
- Use form control properties like
, disabled, dirty and touched.
- Use form group properties like disabledAll, dirtyAll and touchedAll.
- Pre-configure form controls with built-in or custom validator functions to ensure you have all information you need before the form is submitted.
- Check if a single form control or an entire form group is valid with valid and validAll properties.
- Access validation errors with errors form control property.
- Access all form group and form control properties as SolidJS signals.
- Create nested form control structures.
Installation
`shell
using npm
npm install solar-formsusing yarn
yarn add solar-forms
`> If you encounter any issues when setting up Solar Forms, try consulting our
> FAQ section!
Documentation
- Online examples
- Getting started
* Creating form group
* Binding our form group to the
element using formGroup directive
* Accessing form control values at any time
* Managing disabled form control property
* Managing disabledAll form group property
* Managing dirty form control property
* Managing dirtyAll form group property
* Managing touched form control property
* Managing touchedAll form group property
* Validating form controls
+ Setting up form control validators
+ Accessing the valid form control property
+ Accessing the validAll form group property
+ Accessing validation errors
+ Built-in validators
* required validator
* min validator
* max validator
* minLength validator
* maxLength validator
* is validator
* isAnyOf validator
* email validator
* pattern validator
* Binding form controls to different types of elements
+ Type of "text"
+ Type of "email"
+ Type of "password"
+ Type of "tel"
+ Type of "url"
+ Type of "number"
+ Type of "range"
+ Type of "date"
+ Type of "datetime-local"
+ Type of "time"
+ Type of "checkbox"
+ Type of "radio"
* Binding form controls to