A powerfull Form Manager https://dze.io
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
Florian Bouillon 854c5fae1e
Fix browser incrmenting numberInput by itself while scrolling
pirms 4 dienas
src Fix browser incrmenting numberInput by itself while scrolling pirms 4 dienas
.babelrc Added new build system via Rollup ! pirms 1 nedēļas
.gitignore Added new build system via Rollup ! pirms 1 nedēļas
.npmignore Removed build.json pirms 1 mēnesi
CHANGELOG.md BUMP -> 0.3.0 pirms 1 nedēļas
CONTRIBUTING.md Update CONTRIBUTING pirms 1 nedēļas
LICENSE.md Updated pirms 1 mēnesi
README.md Updated Wiki pirms 1 nedēļas
package.json Added new build system via Rollup ! pirms 1 nedēļas
rollup.config.js Added new build system via Rollup ! pirms 1 nedēļas
tsconfig.cjs.json Added new build system via Rollup ! pirms 1 nedēļas
tsconfig.json Added new build system via Rollup ! pirms 1 nedēļas
yarn.lock Added new build system via Rollup ! pirms 1 nedēļas

README.md

Form Manager

A powerfull Manager for all your forms

Table of Content

Installation

nothing difficult.
In you project simply run this command

yarn add @dzeio/form-manager

or

npm install @dzeio/form-manager

usage

Typescript

import FormManager from '@dzeio/form-manager';

const fm = new FormManager(document.getElementById("form"));
const am = fm.attributeManager; // The Attribute Manager

Add Modules

import RepeatInput from '@dzeio/form-manager/modules/RepeatInput'
import IgnoreAttribute from '@dzeio/form-manager/attributes/IgnoreAttribute';

fm.assign(RepeatInput)
// and/or attributes
am.register(IgnoreAttribute)

// After adding modules/attributes run to reffect modules to inputs
fm.setupInputs();
am.setup();

Now You can launch any lines from below !

import { FMMode } from '@dzeio/form-manager'

// verify form validity
fm.verify(); //return true if valid else return false
// if it returns false you can use the variable under to see the first errored input
fm.lastErroredInput

// submit your data to an endpoint
fm.submit("/api/dzeio", (ev) => {/* onloaded callback*/})

// get the json of your form
fm.getJSON()

// fill form from URI
// datas MUST be in JSON (see getJSON for examples)
fm.fillFromURI("uri")

// same as before but you give the json from typescript
fm.fillFromJSON(json)

// change if you only see the form or edit them
fm.setMode(FMMode.ViewMode) // make form uneditable
fm.setMode(FMMode.EditMode) // Make form editable

// same thing as before but just for one field
fm.setModeForInput(FMMode.ViewMode, "inputName")
fm.setModeForInput(FMMode.EditMode, "inputName")

// Reset the form to it's defaults values
fm.clear()

Modules & Attributes

You can create you own modules/attributes or use the builtin ones
See AbstractInput.ts to get started on module creation
And AbstractAttribute.ts for attribute creation

Builtin Modules

Module name Description
Datalist Manage the datalist better than ever !
Date Manage the date element
Repeat Make your fields repeatable !
Select Fix your Select

Builtin Attributes

Attribute name Description
data-autoset Update your value in realtime
data-default a better value than value
data-ignore make an input field not submitted
data-regex Verify you value via regex

Issues

Complete listing here

Changelog

Here

Wiki

Here