New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →

agile-form

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

agile-form

Reusable form builder with support for (richt-)text, code, selections, numbers, dates and so on.

0.0.442
latest
Source
npm

Version published: last week

Maintainers: 0

Created: 4 years ago

Source

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, invalid or 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>

Keywords

FAQs

What is agile-form?

Is agile-form well maintained?

Package last updated on 12 Feb 2025

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

agile-form

Project status

Use case

Quick-Start

Keywords

Related posts

TC39 Advances 3 Proposals to Stage 4: RegExp Escaping, Float16Array, and Redeclarable global eval vars

Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility