Text Input
The "Text Input" component is used for single-line texts such as for the users' "First Name", and "Last Name" fields.
Text Input Properties
There are four different input types that you can select; they are as follows:
| Type | Description |
|---|---|
| Text | Accepts all forms of text inputs. |
| Password | Accepts both texts and numbers. The default password regex is as follows: (/^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;) Note: On selecting the input type as password, you will note an "eye" button (show password) next to the field. It enables the Hide/Show option for the password for the users. (When "show password" is set to hide, the entered password is rendered as a set of dots - each dot representing a character.) |
Needs to satisfy the following default regex: (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;) | |
| Number | Only accepts digits. Default regex: (/^[0-9]/;) |
Regex (Change your regex values as needed.)
To change regex - click on the Validation tab (third icon from the left) at the bottom right of the widgets panel. Select "Pattern" from the validation dropdown. Enter the regex code in the field, and click on "Add". Now, the regex value should be enabled for the input field.
API Methods
setReadOnly
Sets the ReadOnly flag for this component.
- Method
- Usage
setReadOnly(readOnly: boolean): void
// Setting the readOnly to "true" renders the field as non-editable
a8forms.Input("inputId").setReadOnly(true)
// Setting the readOnly to "false" enables the field to be editable
a8forms.Input("inputId").setReadOnly(false)
setVisibility
Sets the Visibility flag for this component.
- Method
- Usage
setVisibility(visible: boolean): void
// Setting the visibility to "true" makes the element visible
a8forms.Input("inputId").setVisibility(true)
// Setting the visibility to "false" makes the element invisible
a8forms.Input("inputId").setVisibility(false)
setVisibilityCondition
Sets the visibility condition for this component.
- Method
- Usage
setVisibilityCondition(condition: string): void
// Sets a condition for changing the element's visibility status.
a8forms.Input("inputId").setVisibilityCondition("1 === 1")
Event Handlers
Event handlers allow you to set triggers for various actions based on the fired events.
onChange
onChange - Triggers an action every time the user makes a change within the text field (anything that changes the component's "value").
onBlur
onBlur - Sets the action to be performed when the user clicks out of the text field.