Control Connector¶

It connects html control element with form management mechanism. Under the hood it retries a html control element, register its values from attributes like:

value
disabled
readonly
required

It also initializes a control validators, that can be configured through available attributes.

Example¶

Basic Usage

<control-connector>
    <label for="firstname">

        firstname

        <input
            type="text"
            name="firstname"
            id="firstname"/>
    </label>
</control-connector>

Attributes¶

Attribute name	Type	Default	Description
min	string	''	min value.
max	string	''	min value.
length	string	''	length of inserted value.
moreThan	string	''	value must be more than (only for number input).
lessThan	string	''	value must be less than (only for number input).
email	boolean	''
required	boolean	''
requiredInGroup	boolean	''	used when we hava multiple form controls with the same name attribute in a single control connector, and we want to at least one element to be selected. Mostly used with radio groups.
validationMode	string: blur	blur	dedicates when validation is performed in a control.

Example¶

Extended Example

<control-connector max="10" min="5" required>
    <label for="firstname">

        firstname

        <input
            type="text"
            name="firstname"
            id="firstname"/>
    </label>
</control-connector>

<control-connector email required>
    <label for="email">

        email

        <input
            type="email"
            name="email"
            id="email"/>
    </label>
</control-connector>

<control-connector requiredInGroup>
    <label for="female">

        female

        <input
            type="radio"
            name="sex"
            id="female"
            value="1"/>
    </label>

    <label for="male">

        male

        <input
            type="radio"
            name="sex"
            id="male"
            value="2"/>
    </label>
</control-connector>