mirror of
https://github.com/dzeiocom/FormManager.git
synced 2025-04-22 19:02:15 +00:00
Updated Wiki
Signed-off-by: Avior <florian.bouillon@delta-wings.net>
This commit is contained in:
parent
4fc3bb24d1
commit
fdf5c9a725
83
README.md
83
README.md
@ -10,18 +10,21 @@ A powerfull Manager for all your forms
|
|||||||
- [usage](#usage)
|
- [usage](#usage)
|
||||||
- [Typescript](#typescript)
|
- [Typescript](#typescript)
|
||||||
- [Modules & Attributes](#modules--attributes)
|
- [Modules & Attributes](#modules--attributes)
|
||||||
- [Modules](#modules)
|
- [Builtin Modules](#builtin-modules)
|
||||||
- [Attributes](#attributes)
|
- [Builtin Attributes](#builtin-attributes)
|
||||||
- [Issues](#issues)
|
- [Issues](#issues)
|
||||||
- [Changelog](#changelog)
|
- [Changelog](#changelog)
|
||||||
|
- [Wiki](#wiki)
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
nothing difficult
|
nothing difficult.
|
||||||
|
In you project simply run this command
|
||||||
```bash
|
```bash
|
||||||
yarn add @dzeio/form-manager
|
yarn add @dzeio/form-manager
|
||||||
|
```
|
||||||
or
|
or
|
||||||
|
```bash
|
||||||
npm install @dzeio/form-manager
|
npm install @dzeio/form-manager
|
||||||
```
|
```
|
||||||
|
|
||||||
@ -32,73 +35,81 @@ npm install @dzeio/form-manager
|
|||||||
```ts
|
```ts
|
||||||
import FormManager from '@dzeio/form-manager';
|
import FormManager from '@dzeio/form-manager';
|
||||||
|
|
||||||
const fm = new FormManager(docuement.getElementById("form"));
|
const fm = new FormManager(document.getElementById("form"));
|
||||||
|
const am = fm.attributeManager; // The Attribute Manager
|
||||||
|
```
|
||||||
|
|
||||||
// add modules
|
Add Modules
|
||||||
import { FMRepeatAssignment } from '@dzeio/FormManager/modules/FMRepeatInput'
|
```ts
|
||||||
|
import RepeatInput from '@dzeio/form-manager/modules/RepeatInput'
|
||||||
|
import IgnoreAttribute from '@dzeio/form-manager/attributes/IgnoreAttribute';
|
||||||
|
|
||||||
fm.assign(FMRepeatAssignment)
|
fm.assign(RepeatInput)
|
||||||
|
// and/or attributes
|
||||||
|
am.register(IgnoreAttribute)
|
||||||
|
|
||||||
// or
|
// After adding modules/attributes run to reffect modules to inputs
|
||||||
|
|
||||||
import FMDateInput from '../FormManagerGit/modules/FMDateInput'
|
|
||||||
fm.assign({
|
|
||||||
input: FMDateInput,
|
|
||||||
type: "date",
|
|
||||||
tagName: "input"
|
|
||||||
});
|
|
||||||
|
|
||||||
// After adding modules run to reffect modules to inputs
|
|
||||||
fm.setupInputs();
|
fm.setupInputs();
|
||||||
|
am.setup();
|
||||||
|
```
|
||||||
|
|
||||||
// verify form validity:
|
Now You can launch any lines from below !
|
||||||
|
```ts
|
||||||
|
import { FMMode } from '@dzeio/form-manager'
|
||||||
|
|
||||||
|
// verify form validity
|
||||||
fm.verify(); //return true if valid else return false
|
fm.verify(); //return true if valid else return false
|
||||||
// if it returns false you can use the variable under to see th FMInput that isnt valid
|
// if it returns false you can use the variable under to see the first errored input
|
||||||
fm.lastErroredInput
|
fm.lastErroredInput
|
||||||
|
|
||||||
// submit your data to an endpoint
|
// submit your data to an endpoint
|
||||||
fm.submit("/api/idk", (ev) => {/* onloaded callback*/}, /* verify datas beforehand default:true*/ true)
|
fm.submit("/api/dzeio", (ev) => {/* onloaded callback*/})
|
||||||
|
|
||||||
// get the json of your form
|
// get the json of your form
|
||||||
fm.getJSON()
|
fm.getJSON()
|
||||||
|
|
||||||
// fill form from URI (datas MUST be in JSON (see getJSON for examples))
|
// fill form from URI
|
||||||
|
// datas MUST be in JSON (see getJSON for examples)
|
||||||
fm.fillFromURI("uri")
|
fm.fillFromURI("uri")
|
||||||
|
|
||||||
// same as before but you give the json from ts
|
// same as before but you give the json from typescript
|
||||||
fm.fillFromJSON(json)
|
fm.fillFromJSON(json)
|
||||||
|
|
||||||
// change if you only see the form or edit them
|
// change if you only see the form or edit them
|
||||||
fm.setMode(FMMode.ViewMode or FMMode.EditMode)
|
fm.setMode(FMMode.ViewMode) // make form uneditable
|
||||||
|
fm.setMode(FMMode.EditMode) // Make form editable
|
||||||
|
|
||||||
// same thing as before but just for one field
|
// same thing as before but just for one field
|
||||||
fm.setModeForInput(FMMode.ViewMode or FMMode.EditMode, "inputName")
|
fm.setModeForInput(FMMode.ViewMode, "inputName")
|
||||||
|
fm.setModeForInput(FMMode.EditMode, "inputName")
|
||||||
|
|
||||||
// Reset the form to it's defaults values
|
// Reset the form to it's defaults values
|
||||||
fm.clear()
|
fm.clear()
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
## Modules & Attributes
|
## Modules & Attributes
|
||||||
|
|
||||||
### Modules
|
You can create you own modules/attributes or use the builtin ones
|
||||||
|
See [AbstractInput.ts](https://git.delta-wings.net/dzeio/FormManager/src/branch/master/src/modules/InputAbstract.ts) to get started on module creation
|
||||||
|
And [AbstractAttribute.ts](https://git.delta-wings.net/dzeio/FormManager/src/branch/master/src/attributes/AttributeAbstract.ts) for attribute creation
|
||||||
|
|
||||||
|
### Builtin Modules
|
||||||
|
|
||||||
| Module name | Description |
|
| Module name | Description |
|
||||||
| :---------: | :---------: |
|
| :---------: | :---------: |
|
||||||
| [Datalist](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.datalist) | Manage the datalist better than ever ! |
|
| [Datalist](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.datalist) | Manage the datalist better than ever ! |
|
||||||
| [Date](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.date) | Manage the date element |
|
| [Date](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.date) | Manage the date element |
|
||||||
| [File](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.file) | Manage single file uploads |
|
|
||||||
| [Repeat](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.repeat) | Make your fields repeatable ! |
|
| [Repeat](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.repeat) | Make your fields repeatable ! |
|
||||||
| [Select](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.select) | Fix your Select |
|
| [Select](https://git.delta-wings.net/dzeio/FormManager/wiki/modules.select) | Fix your Select |
|
||||||
|
|
||||||
### Attributes
|
### Builtin Attributes
|
||||||
|
|
||||||
| Attribute name | Description |
|
| Attribute name | Description |
|
||||||
| :------------: | :---------: |
|
| :------------: | :---------: |
|
||||||
| [data-autoset](https://git.delta-wings.net/dzeio/FormManager/wiki/attribute.data-autoset) | Update your value in _near_ realtime |
|
| [data-autoset](https://git.delta-wings.net/dzeio/FormManager/wiki/attributes.data-autoset) | Update your value in realtime |
|
||||||
| [data-default](https://git.delta-wings.net/dzeio/FormManager/wiki/attribute.data-default) | a better value than `value` |
|
| [data-default](https://git.delta-wings.net/dzeio/FormManager/wiki/attributes.data-default) | a better value than `value` |
|
||||||
| [data-ignore](https://git.delta-wings.net/dzeio/FormManager/wiki/attribute.data-ignore) | i don't see this |
|
| [data-ignore](https://git.delta-wings.net/dzeio/FormManager/wiki/attributes.data-ignore) | make an input field not submitted |
|
||||||
| [data-regex](https://git.delta-wings.net/dzeio/FormManager/wiki/attribute.data-regex) | regex your value |
|
| [data-regex](https://git.delta-wings.net/dzeio/FormManager/wiki/attributes.data-regex) | Verify you value via regex |
|
||||||
|
|
||||||
## Issues
|
## Issues
|
||||||
|
|
||||||
@ -106,4 +117,8 @@ Complete listing [here](https://git.delta-wings.net/dzeio/FormManager/issues)
|
|||||||
|
|
||||||
## Changelog
|
## Changelog
|
||||||
|
|
||||||
[here](./CHANGELOG.md)
|
[Here](./CHANGELOG.md)
|
||||||
|
|
||||||
|
## Wiki
|
||||||
|
|
||||||
|
[Here](#form-manager)
|
||||||
|
Loading…
x
Reference in New Issue
Block a user