Form Text (v2)

Text form field component written in HTL.

Features

• Provides the following type of input:
  • text
  • textarea
  • email
  • telephone
  • date
  • number
  • password
• Custom constraint messages for the above types

Use Object

The Form Text component uses the com.adobe.cq.wcm.core.components.models.form.Text Sling Model for its Use-object.

Edit Dialog Properties

The following properties are written to JCR for this Form Text component and are expected to be available as Resource properties:

1. ./type - defines the type of text this field provides; possible values: text, textarea, email, tel, date, number, password
2. ./rows - defines the number of text lines available in this input field
3. ./jcr:title - defines the label to use for this field
4. ./hideTitle - if set to true, the label of this field will be hidden
5. ./name - defines the name of the field, which will be submitted with the form data
6. ./value - defines the default value of the field
7. ./helpMessage - defines a help message that can be rendered in the field as a hint for the user
8. ./usePlaceholder - if set to true, the help message will be displayed inside the form input if the field is empty and not focused
9. ./constraintMessage - defines the message displayed as tooltip when submitting the form if the value does not validate the chosen type
10. ./required - if set to true, this field will be marked as required, not allowing the form to be submitted until the field has a value
11. ./requiredMessage - defines the message displayed as tooltip when submitting the form if the value is left empty
12. ./readOnly - if set to true, the filed will be read only
13. ./id - defines the component HTML ID attribute.

Client Libraries

The component provides a core.wcm.components.form.text.v2 client library category that contains a JavaScript component. It should be added to a relevant site client library using the embed property.

It also provides a core.wcm.components.form.text.v2.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit dialog.

BEM Description

BLOCK cmp-form-text
    ELEMENT cmp-form-text__help-block
    ELEMENT cmp-form-text__textarea
    ELEMENT cmp-form-text__text

JavaScript Data Attribute Bindings

Apply a data-cmp-is="formText" attribute to the wrapper block to enable initialization of the JavaScript component.

The following attributes can be added to the same element to provide options:

1. data-cmp-constraint-message - populated with constraintMessage from the component's edit dialog
2. data-cmp-required-message - populated with requiredMessage from the component's edit dialog

A data-cmp-hook-form-text="input" attribute should be added to the input field or textarea so that the JavaScript is able to target it.

Information

• Vendor: Adobe
• Version: v2
• Compatibility: AEM 6.3
• Status: production-ready
• Documentation: https://www.adobe.com/go/aem_cmp_form_text_v2