Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hardeep-bit/react-jsx-forms
JSX React Forms
https://github.com/hardeep-bit/react-jsx-forms
form-builder form-builder-demo form-group form-schema forma-array forms jsx-react-forms react
Last synced: about 2 months ago
JSON representation
JSX React Forms
- Host: GitHub
- URL: https://github.com/hardeep-bit/react-jsx-forms
- Owner: hardeep-bit
- Created: 2018-05-14T10:24:15.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-25T18:29:08.000Z (about 2 years ago)
- Last Synced: 2024-12-11T18:13:45.456Z (about 2 months ago)
- Topics: form-builder, form-builder-demo, form-group, form-schema, forma-array, forms, jsx-react-forms, react
- Language: JavaScript
- Size: 1.6 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# REACT JSX FORMS
This Module helps you to deal with the Forms in **ReactJS**. It gives you very flexible form which will update you state of your Form every time you interact with it and this will save three main actions **( Touched, Dirty, Valid )** of every field form that you can get help in Validation area.
*Website for **RJF** -* **https://hardy12994.github.io/react-jsx-forms.bin/**
**This module will look familiar to those who had done *Angular* Forms 😃.**
**Look in GIF -**
## What it Provides ?
- Make the Form Fields enrich and handles in very Smooth way.
- Verify all Validations for perticular Field in Form.
- Handel and maintain all the errors.
- Add Properties like `touched`, `dirty`, `error`, `valid`, `valueChanges` to each field in form.
- And Yeah !! It makes sure your form is VALID or NOT.
- The Cool Thing is, this module uses **`rxjs`** which helps to decide when to do what.
## DEMO's -
#### **[FORM BUILDER DEMO]**
#### **[FORM GROUP DEMO]**
#### **[FORM ARRAY DEMO]**
[FORM BUILDER DEMO]:
[FORM GROUP DEMO]:
[FORM ARRAY DEMO]:
## Installation -
```sh
npm install --save react-jsx-forms
```
## How to use ?
First you will initialize you form with [FormBuilder]. [FormBuilder] will accept the Form Schema.
This will provide your form with extra powers like `dirty`, `touched`,`valid`,`observable` etc. These Powers will present in Form and it's Form Fields.
[FormBuilder]:
**[Go to live examples, code and docs!]**
[Go to live examples, code and docs!]:
### This also provides -
#### [Form Group]
Grouping multiple forms in hierarchy with [Form Group].
Check [form group inbuilt functions] and [form group demo].
[form group inbuilt functions]:
[form group demo]:
#### [Form Array]
If we want to handle list in form, then we will use [Form Array].
Check [form array inbuilt functions] and [form array demo].
[form array inbuilt functions]:
[form array demo]:
[Form Group]:
[Form Array]:
## Validations
All [validations] are set in the Form Schema and all them returns boolean. If it is `true` then your field contain errors otherwise your field is valid.
[validations]:
Some of the validations are InBuilt like -
- **Validators.required()**
Returns true when field is Empty.
- **Validators.minChar(10)**
Returns true when field value length is less that limit 10.
- **Validators.maxChar(10)**
Returns true when field exceeds the limit 10.
- **Validators.pattern(/hello/g)**
Returns true when Pattern is Not Matched.
- **Validators.matchLength(10)**
Returns true when field length is not Matched.
- **Validators.matchStringText(Hello)**
Returns true when field value(string) is not equal to "Hello".
- **Validators.matchNumText(10000)**
Returns true when field value(string) is not equal to `10000`.
You can also **[Compose]** your OWN VALIDATION with **`Validators.compose()`**.
[Compose]:
**NOTE** - *[Read the rules] which can help you make your forms.*
[Read the rules]:
**Contribution are Wellcome !**