Text Input State Variable Reference

Related documents

• State Variables Overview
• StateVar Reference
• Built-in State Variables
• Input SV Type Reference
• Text Output State Variable Reference

Table of contents

• Introduction
• Constructor
• Instance methods
  • Inherited methods
  • val()
  • isValid()
• Instance properties
  • Inherited properties
  • allCaps
  • maxLength
  • minLength
  • pattern
  • size
• Child state variables
• Component attributes
  • Inherited attributes
• DOM element properties

Introduction

Text Input state variables represent text inputs. Each rendered component will display according to the format specified in the state variable.

Constructor

• Type string: 'textInput', class: TextInputSv

Syntax

ctl.createPage({
	...,
	stateVarInfo:[
		{type:'textInput', ...},
	],
})

Parameters

• info
  An object containing the state variable properties. The info object can contain the following properties, but subclasses of StateVar may have additional properties:
  • StateVar info properties.
  • Model SV type info properties.
  • Input SV type info properties.
  • allCaps (optional)
    If true, input will be converted to all capitals.
  • maxLength (optional)
    The maximum length of a valid input string. Default: undefined.
  • minLength (optional)
    The minimum length of a valid input string. Default: 0.
  • pattern (optional)
    A pattern for a valid input string, tested with String.match() and passed to the DOM pattern attribute. Default: '' (no pattern).
  • dflt (optional)
    The default value. Default: ''.
  • size (optional)
    The width of the input field in characters. Default: maxLength or 16.

Instance methods

Inherited methods

• StateVar methods
• ModelValueSv methods
• InputSv methods

val()

Syntax

val(value)
val()

Gets or sets the value. The value must be a string or an Error; otherwise an assertion fails. If allCaps is true, the value is converted to upper case.

isValid()

Syntax

isValid(value)
isValid()

Returns true if value (or the current value if omitted) is a string and, when maxLength is a non-negative number, its length is between minLength and maxLength, and, when pattern is non-empty, it matches pattern. Note that minLength is checked only if maxLength is specified.

Note: The component() method returns a TextInputSvCmp.

Instance properties

Inherited properties

• StateVar properties
• ModelValueSv properties
• InputSv properties

allCaps

If true, the value will be converted to all capitals when assigned due to user input or otherwise.

Value

A Boolean.

maxLength

The maximum length of a valid input string. Default: undefined.

Value

An integer Number.

minLength

The minimum length of a valid input string.

Value

An integer Number.

pattern

A pattern for a valid input string. Default: ''.

Value

A String (a RegExp is also accepted by isValid(), but the DOM pattern attribute requires a string).

size

The width of the input field in characters. Default: maxLength or 16.

Value

An integer Number.

Child state variables

The text format is held in a public child state variable with the subname fmt (e.g., myPage_myText_fmt), of type viewObject. Its value is an object with the properties minLength, maxLength, size, and pattern. The minLength, maxLength, size, and pattern properties of the state variable get and set these values. The component monitors the child state variable to update the <input> element.

Component attributes

Inherited attributes

• Component attributes

DOM element properties

• Standard DOM element properties
• The textInput Component will render an <input type="text"> with maxLength, minLength, pattern, and size attributes set according to the state variable instance properties.
• The maxLength, minLength, pattern, and size attributes will be synchronized with the respective state variable properties.
• The <input> element will have a className that contains 'svIo_textInput'.