@motss/formila

---

!NPMnodei-badgenodei-url
!Versionversion-badgeversion-url !Downloadsdownloads-badgedownloads-url !MIT Licensemit-license-badgemit-license-url !Code of Conductcoc-badgecoc-url
!Build Statustravis-badgetravis-url !CircleCIcircleci-badgecircleci-url !Dependency Statusdaviddm-badgedaviddm-url !NSP Statusnsp-badgensp-url !codecovcodecov-badgecodecov-url !Coverage Statuscoveralls-badgecoveralls-url
!codebeat-badgecodebeat-url !codacy-badgecodacy-url

Server-rendering HTML forms with just plain JS object or with JSON object. Do note that not every rough edges are covered. This package can be helpful in making you a little bit more productive if you find yourself dealing with many different HTML forms quite often. Enjoy! :smiley:

Table of contents

• Table of contents
• Pre-requisites
• Setup

- Install - Usage

- [Node.js](#nodejs)
- [Native ES modules or TypeScript](#native-es-modules-or-typescript)

• API Reference

- FormilaData - FormilaOpts - formila(data, options) - formilaSync(data, options)

• License

Pre-requisites

• Node.jsnodejs-url >= 8.9.0
• NPMnpm-url >= 5.5.1 (NPMnpm-url comes with Node.jsnodejs-url so there is no need to install separately.)

Setup

Install

# Install via NPM
$ npm install --save @motss/formila

Usage

Node.js

const { formila } = require('@motss/formila');

const testForm = {
  // attr: {}, // Attributes
  title: 'Test title',
  subtitle: 'Test subtitle',

  hiddenList: [
    {
      name: '_csrf',
      value: '8601779472171008',
    },
  ],

  sectionList: [
    {
      // attr: {}, // Attributes
      fieldsetList: [
        {
          // attr: {}, // Attributes
          title: 'Personal Information',
          subtitle: 'Particulars',
          fieldList: [
            {
              // attr: {}, // Attributes
              elementList: [
                {
                  title: 'Email',
                  fieldTag: `<input id="email"
                  type="email"
                  name="email">`,
                  description: 'Enter your email',
                  errorMessage: 'Invalid email',
                },
              ],
              // Non-validatable (input, select) elements
              // nonElementList: [
              //   '<div>Email:</div><div></div>',
              // ],
            },
          ],
        },
      ],
    },
  ],

  errorMessage: 'Form contains invalid field',
  submitTitle: 'Next',
};

async function main() {
  try {
    // const options = { minify: true };
    const renderedForm = await formila(testForm/** options */);

    return renderedForm;
  } catch (e) {
    console.error('Error rendering form', e);
  }
}

Native ES modules or TypeScript

// @ts-check

import { formila, FormilaData, FormilaOpts } from '@motss/formila';

const testForm: FormilaData = {
  // attr: {}, // Attributes
  title: 'Test title',
  subtitle: 'Test subtitle',

  hiddenList: [
    {
      name: '_csrf',
      value: '8601779472171008',
    },
  ],

  sectionList: [
    {
      // attr: {}, // Attributes
      fieldsetList: [
        {
          // attr: {}, // Attributes
          title: 'Personal Information',
          subtitle: 'Particulars',
          fieldList: [
            {
              // attr: {}, // Attributes
              elementList: [
                {
                  title: 'Email',
                  fieldTag: `<input id="email"
                  type="email"
                  name="email">`,
                  description: 'Enter your email',
                  errorMessage: 'Invalid email',
                },
              ],
              // Non-validatable (input, select) elements
              // nonElementList: [
              //   '<div>Email:</div><div></div>',
              // ],
            },
          ],
        },
      ],
    },
  ],

  errorMessage: 'Form contains invalid field',
  submitTitle: 'Next',
};

async function main() {
  try {
    // const options: FormilaOpts = { minify: true };
    const renderedForm = await formila(testForm/** options */);

    return renderedForm;
  } catch (e) {
    console.error('Error rendering form', e);
  }
}

API Reference

FormilaData

• attr <Object?object-mdn-url> Optional form attributes, e.g. { id: 'checkoutForm', class: 'form__checkout' }.
• title <string?string-mdn-url> Optional form title.
• subtitle <string?string-mdn-url> Optional form subtitle.
• hiddenList <Array?array-mdn-url<Objectobject-mdn-url>> Optional list of hidden elements in the form.

- name <stringstring-mdn-url> Name of the hidden form element, e.g. _csrf. - value <stringstring-mdn-url> Value of the hidden form element, e.g. 5976446363238400.

• sectionList <Array?array-mdn-url<Objectobject-mdn-url>> Optional list of sections.

- attr <Object?object-mdn-url> Optional section attributes. - fieldsetList <Array?array-mdn-url<Objectobject-mdn-url>> Optional list of fieldsets.

- `attr` <[Object?][object-mdn-url]> Optional fieldset attributes.
- `title` <[string?][string-mdn-url]> Optional fieldset title.
- `subtitle` <[string?][string-mdn-url]> Optional fieldset subtitle.
- `fieldList` <[Array?][array-mdn-url]<[Object][object-mdn-url]>> Optional list of fields.
  - `elementList` <[Array?][array-mdn-url]<[Object][object-mdn-url]>> Optional list of validatable elements such as `<input>` and `<select>` elements.
    - `attr` <[Object?][object-mdn-url]> Optional field attributes.
    - `title` <[string?][string-mdn-url]> Optional field title, e.g. `Email`.
    - `fieldTag` <[string?][string-mdn-url]> HTML `<input>` or `<select>` element. The element must have the attribute `id` set, e.g. `<input id="email" type="email" name="email">`.
    - `description` <[string?][string-mdn-url]> Optional field description, e.g. `Enter your valid email address`.
    - `errorMessage` <[string?][string-mdn-url]> Optional error message when the field is invalid, e.g. `Invalid email`.
  - `nonElementList` <[Array?][array-mdn-url]<[string][string-mdn-url]>> Optional list of non-validatable elements.

• errorMessage <string?string-mdn-url> Optional error message of the form, e.g. Form contains invalid field(s).
• submitTitle <string?string-mdn-url> Optional title of the submit button. Defaults to Submit.

FormilaOpts

• minify <boolean?boolean-mdn-url> Optional flag to minify rendered HTML form. Defaults to true.

formila(data, options)

• data <FormilaDataformiladata-url> Form data.
• options <FormilaOpts?formilaopts-url> Optional configuration to render the HTML form.
• returns: <Promisepromise-mdn-url<stringstring-mdn-url>> Promise which resolves with rendered HTML form.

formilaSync(data, options)

This methods works the same as formila(data[, options]) except that this is the synchronous version.

License

MIT License © Rong Sen Ng