Agile-form NPM

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>${Tools.represent(getData())}</pre>
            </div>

            <input name="name" />

            <button type="submit">OK</button>
        </agile-form>
    </body>
<html>

component form react web webcomponent web-component

@everything-registry/sub-chunk-1106

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

6 months ago

6 months ago

7 months ago

7 months ago

5 months ago

6 months ago

6 months ago

7 months ago

7 months ago

8 months ago

10 months ago

9 months ago

9 months ago

10 months ago

10 months ago

12 months ago

12 months ago

10 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago