Monster.Components.Form. Form

This CustomControl creates a form element with a variety of options.

Dependencies: the system uses functions of the monsterjs library.

You can create this control either by specifying the HTML tag <monster-form /> directly in the HTML or using Javascript via the document.createElement('monster-form'); method.

<monster-select></monster-select>

Or you can create this CustomControl directly in Javascript:

import {Form} from 'https://cdn.jsdelivr.net/npm/@schukai/[email protected]/dist/modules/form.js';
document.createElement('monster-form');

Constructor

new Form()

A configurable form control

Since
  • 1.6.0
Throws:

the options attribute does not contain a valid json definition.

Type
Error

Members

defaults

This method is called internal and should not be called directly.

This method is called internal and should not be called directly.

To set the options via the html tag the attribute data-monster-options must be set. As value a JSON object with the desired values must be defined.

The JSON can be specified as a DataURI.

new Monster.Types.DataUrl(btoa(JSON.stringify({
       shadowMode: 'open',
       delegatesFocus: true,
       templates: {
           main: undefined
       }
   })),'application/json',true).toString()

The attribute data-monster-options-selector can be used to access a script tag that contains additional configuration.

As value a selector must be specified, which belongs to a script tag and contains the configuration as json.

<script id="id-for-this-config" type="application/json">
   {
       "config-key": "config-value"
   }
</script>

The individual configuration values can be found in the table.

Properties
NameTypeDescription
templatesObject

Template definitions

Properties
NameTypeDescription
mainstring

Main template

datasourceDatasource

data source

Methods

(static) getCSSStyleSheet() → {CSSStyleSheet}

Returns:
Type: 
CSSStyleSheet

(static) getDatasources() → {Map}

Returns:
Type: 
Map

(static) getTag() → {string}

Returns:
Type: 
string

assembleMethodSymbol() → {Monster.Components.Form.Form}

connectedCallback() → {void}

Called every time the element is inserted into the DOM.

Called every time the element is inserted into the DOM. Useful for running setup code, such as fetching resources or rendering. Generally, you should try to delay work until this time.

Returns:
Type: 
void

getValues() → {*}

Returns:
Type: 
*

refresh() → {Form}

Throws:

undefined datasource

Type
Error
Returns:
Type: 
Form