Adaptive Form Email input field component written in HTL.
- Provides the following type of input:
- Custom constraint messages for the above types
- Styles
- Allows replacing this component with other component (as mentioned below).
The Form Email component uses the com.adobe.cq.forms.core.components.models.form.TextInput
Sling Model for its Use-object.
The following properties are written to JCR for this Form Email component and are expected to be available as Resource
properties:
./jcr:title
- defines the label to use for this field./hideTitle
- if set totrue
, the label of this field will be hidden./name
- defines the name of the field, which will be submitted with the form data./default
- defines the default value of the field./description
- defines a help message that can be rendered in the field as a hint for the user./required
- if set totrue
, this field will be marked as required, not allowing the form to be submitted until the field has a value./requiredMessage
- defines the message displayed as tooltip when submitting the form if the value is left empty./readOnly
- if set totrue
, the filed will be read only
The component provides a core.forms.components.textinput.v1.runtime
client library category that contains the Javascript runtime for the component.
It should be added to a relevant site client library using the embed
property.
It also provides a core.forms.components.textinput.v1.editor
editor client library category that includes
JavaScript handling for dialog interaction. It is already included by its edit dialog.
We support replace feature that allows replacing Reset Button component to any of the below components:
- Button
- Date Picker
- Number Input
- Reset Button
- Submit Button
- Telephone Input
- Text Box
- Text Input
BLOCK cmp-adaptiveform-emailinput
ELEMENT cmp-adaptiveform-emailinput__label
ELEMENT cmp-adaptiveform-emailinput__label-container
ELEMENT cmp-adaptiveform-emailinput__widget
ELEMENT cmp-adaptiveform-emailinput__questionmark
ELEMENT cmp-adaptiveform-emailinput__shortdescription
ELEMENT cmp-adaptiveform-emailinput__longdescription
ELEMENT cmp-adaptiveform-emailinput__errormessage
By placing the class names cmp-adaptiveform-emailinput__label
and cmp-adaptiveform-emailinput__questionmark
within the cmp-adaptiveform-emailinput__label-container
class, you create a logical grouping of the label and question mark elements. This approach simplifies the process of maintaining a consistent styling for both elements.
The following attributes must be added for the initialization of the email input component in the form view:
data-cmp-is="adaptiveFormEmailInput"
data-cmp-adaptiveformcontainer-path="${formstructparser.formContainerPath}"
The following are optional attributes that can be added to the component in the form view:
data-cmp-valid
having a boolean value to indicate whether the field is currently valid or notdata-cmp-required
having a boolean value to indicate whether the field is currently required or notdata-cmp-readonly
having a boolean value to indicate whether the field is currently readonly or notdata-cmp-active
having a boolean value to indicate whether the field is currently active or notdata-cmp-visible
having a boolean value to indicate whether the field is currently visible or notdata-cmp-enabled
having a boolean value to indicate whether the field is currently enabled or not