@crownie/form-model

A framework agnostic form model

Usage no npm install needed!

<script type="module">
  import crownieFormModel from 'https://cdn.skypack.dev/@crownie/form-model';
</script>

README

Form Model

NPM Version Linux Build Github License

Form model is a framework agnostic and deserializable form model. It can be used to construct form structure regardless of how you want to render the UI. This allows reusability of form structure across different presentation layer.

This consists of various classes that are extendable, should you need to add more functionality.

Install

// npm
npm install @crownie/form-model

// or yarn
yarn add @crownie/form-model

Usage

import {Form, TextFieldBuilder} from '@crownie/form-model';

const form = new Form();

form
  .addField('username', new TextFieldBuilder('Username'))
  .addField('password', new TextFieldBuilder('Password', 'password'));

console.log(JSON.stringify(form, null, 2));

Output

{
  "fields": {
    "username": {
      "width": {
        "xs": 12
      },
      "defaults": {
        "string": "",
        "number": "",
        "boolean": false,
        "array": [],
        "object": {}
      },
      "type": "text",
      "label": "Username",
      "noWrap": false,
      "schemaConfig": {
        "type": "string",
        "defaultVal": ""
      }
    },
    "password": {
      "width": {
        "xs": 12
      },
      "defaults": {
        "string": "",
        "number": "",
        "boolean": false,
        "array": [],
        "object": {}
      },
      "type": "password",
      "label": "Password",
      "noWrap": false,
      "schemaConfig": {
        "type": "string",
        "defaultVal": ""
      }
    }
  }
}

License

MIT