agile-form
v0.0.456
Published
Reusable form builder with support for (richt-)text, code, selections, numbers, dates and so on.
Maintainers
thaibaultReadme
Project status
Use case
Agile-Form is a reusable highly configurable low-code form technology. This Library enables you to decouple a form data specification from its representation.
Features included:
- Full input agnostic. Use native inputs or web-components providing its
internal state via
value,invalidor other input properties. - Powerful Low-Code-Engine to formulate constraints input or various nested element appearance criteria or determine output schema for rest-endpoints.
- Conditionally hide and show various html content determined by the current form state.
- Integrated Re-Captcha v3 (no user challenge) and v2 (with user challenge) fallback mechanism.
- Powerful dynamic input configuration via input attributes, form attributes, configuration given by external endpoint or url query parameter.
- Explicit enable-list capability to allow what to allow to configure via url.
- Fully configurable data transformation and serialisation engine.
- Dynamic inter-input configurations. Derive input configurations from other dependent input elements or runtime form state.
- Dynamic output evaluation in specified output html elements.
- Automatic button interactions for "submit", "reset", "clear" and "truncate".
- Consolidated form validation state derived by input states.
- Statically type checked and interface specification via Typescript.
- Interactive form build support designed for content management systems.
Quick-Start
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!--Prevent browser caching-->
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<title>playground</title>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.7.0/webcomponents-bundle.js"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.7.0/custom-elements-es5-adapter.js"
></script>
<script
src="https://torben.website/agile-form/data/distributionBundle/index.bundle.js"
></script>
<script>
agileForm.index.api.register()
</script>
</head>
<body>
<agile-form
configuration="{
inputs: {
name: {}
}
}"
>
<div class="agile-form__status-message"></div>
<div
class="agile-form__group"
name="send-report"
show-if="submitted"
>
Form-Result: <pre>${object.represent(getData())}</pre>
</div>
<input name="name" />
<button type="submit">OK</button>
</agile-form>
</body>
<html>