Control Errors

Used to render control validation messages. If we provide a default value, it initializes errors field in a JavaScript control object with these value/values.

Default value must be wrapped in a container with slot attribute and also error message mus be inside an element with js__error-message class.

By default, it renders all errors for control/controls with specific name, but if we have multiple controls with the same name, and we want to render errors only for specific one we can provide a control id attribute.

Attributes

Attribute name	Type	Default	Description
id	string	''	control id value, we want error to be displayed for.

Example

Basic Usage

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

        firstname

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

    <control-errors>
        <ul slot>
            <li>
                <span class="js__error-message">
                    First error message
                </span>
            </li>

            <li>
                <span class="js__error-message">
                    Secod error message
                </span>
            </li>
        </ul>
    </control-errors>
</control-connector>

Example with control id and empty inital errors

 <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>

    <control-errors id="female"></control-errors>
</control-connector>