Text field component of form
that enables an editable field for users to input text. To implement, use the text-input
key.
Here is a structure, which has properties email
and fullName
that can be populated with separate text-input
elements in a form
:
structure (Survey) {
property (fullName) {
type (FullName)
min (Required) max (One)
}
property (email) {
type(Email)
min (Required) max(One)
}
property (comments) {
type (Comments)
min (Optional) max (One)
}
property (isSigningUp) {
type (IsSigningUp)
min (Required) max (One)
}
property (favoriteColors) {
type (FavoriteColors)
min (Required) max (One)
}
property (funMeter) {
type (FunMeter)
min (Required) max (One)
}
property (age) {
type (Age)
min (Required) max (One)
}
}
For an input view of a text-input
:
input-view {
match {
FullName (fullName) {
to-input: SubmitSurvey
}
}
message {
template ("What is your full name?")
}
render {
form {
elements {
text-input {
id (fullName)
label (Full Name)
type (FullName)
max-length (50)
value ("#{raw(fullName)}")
}
}
on-submit {
goal: FullName
value: viv.core.FormElement(fullName)
}
}
}
}
For input view of a text-input
that uses a pattern
:
input-view {
match {
Email (email) {
to-input: SubmitSurvey
}
}
message {
template ("What is your email?")
}
render {
form {
elements {
text-input {
id (email)
label (Email)
type (Email)
max-length (50)
// Add client side validation on email field
pattern {
email
}
value ("#{raw(email)}")
}
}
on-submit {
goal: Email
value: viv.core.FormElement(email)
}
}
}
}
You can run the sample capsule in the Simulator to see how this component displays on different devices, if supported.
id required | Unique identifier to map between an element in the form and property values set in the on-submit intent container |
type required | Concept type of element being inputted |
guide[deprecated] optional | This key is deprecated |
label optional | Text label of form element |
mask[deprecated] optional | This key is deprecated |
max-length optional | Maximum number of characters allowed in input value as an integer |
pattern optional | Checks if the passed input follows the specified pattern |
pattern-type[deprecated] optional | This key is deprecated |
placeholder-char[deprecated] optional | This key is deprecated |
required optional | Boolean |
value optional | Initial value of element |