textbox - Marcura/marcura-ui GitHub Wiki

Table of contents

Demo

Demo

Usage

View:

<ma-text-box
    value="address">
</ma-text-box>

Controller:

$scope.address = '34, Bishop Street';

Fields

canReset

Determines whether the button which allows the user to clear the value is displayed.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-text-box
    can-reset="true">
</ma-text-box>

changeTimeout

A timeout (in milliseconds) after which change event is invoked. The timeout is reset after another change takes place.

Type

Number

Default value

0

Examples

Sets the field:

View:

<ma-text-box
    change-timeout="500">
</ma-text-box>

changeWhenIsInvalid

Determines whether change event should fire even when the value is invalid.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-text-box
    change-when-is-invalid="true">
</ma-text-box>

decimals

A number of decimal digits allowed.
Note: type should be set to number.

Type

Number

Default value

2

Examples

Sets the field:

View:

<ma-text-box
    decimals="3">
</ma-text-box>

defaultValue

A value to use when the main value of the component is not set.
When the value is reset defaultValue is used as value.

Type

String

Default value

''

Examples

Sets the field:

View:

<ma-text-box
    type="number"
    value="amount"
    default-value="0">
</ma-text-box>

Controller:

$scope.amount = undefined;

hasShowPasswordButton

Determines whether the button which allows the user to show or hide password is displayed.

Type

Boolean

Default value

true

Examples

Sets the field:

View:

<ma-text-box
    has-show-password-button="false">
</ma-text-box>

id

Unique identifier of the component.

Type

String

Default value

''

Examples

Sets the field:

View:

<ma-text-box
    id="address">
</ma-text-box>

instance

An object that provides API for the component.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

// API object can be used after the component has been initialized by AngularJS,
// which is often after a timeout or in callback functions.
$timeout(function() {
    var isValid = textBox.isValid();
});

isDisabled

Determines whether the component is disabled.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-text-box
    is-disabled="true">
</ma-text-box>

isRequired

Determines whether a value is required.
If value is not entered by the user the component will become invalid and will be highlighted accordingly.

Type

Boolean

Default value

false

Examples

Sets the field:

View:

<ma-text-box
    is-required="true">
</ma-text-box>

max

A maximum number or length of text allowed (inclusive).

Type

Number

Default value

null

Examples

Sets the field:

View:

<ma-text-box
    max="max">
</ma-text-box>

Controller:

$scope.max = 5000.50;

min

A minimum number or length of text allowed (inclusive).

Type

Number

Default value

null

Examples

Sets the field:

View:

<ma-text-box
    min="min">
</ma-text-box>

Controller:

$scope.min = 1000.50;

trim

Determines whether white spaces are removed from both ends of the value when it is changed.

Type

Boolean

Default value

true

Examples

Sets the field:

View:

<ma-text-box
    trim="false">
</ma-text-box>

type

Type of the component, which can be text, password, email or number.

Type

String

Default value

'text'

Examples

Sets the field:

View:

<ma-text-box
    type="password">
</ma-text-box>

useFormat

Determines whether to format number.

Type

Boolean

Default value

true

Examples

Sets the field:

View:

<ma-text-box
    use-format="false">
</ma-text-box>

validators

A list of validators which is used to validate the value each time it is changed.

Type

Array

Default value

null

Examples

Sets the field:

View:

<ma-text-box
    validators="[addressValidator]">
</ma-text-box>

Controller:

$scope.addressValidator = {
    validate: function(port) {
        // Check the address somehow and return true or false.
        return true;
    }
};

value

A value of the component which is bound to an outer scope with two-way data binding.

Type

String

Default value

null

Examples

Sets the field:

View:

<ma-text-box
    value="address">
</ma-text-box>

Controller:

$scope.address = '34, Bishop Street';

Events

blur

Fires when the component loses focus.

Parameters

maValue String
Value.

maOldValue String
Value at the moment of receiving focus.

maHasValueChanged Boolean
Determines whether the value has changed since the last time the component received focus.

Examples

Subscribes to the event:

View:

<ma-text-box
    value="address"
    blur="blur(maValue)">
</ma-text-box>

Controller:

$scope.blur = function(address) {
    // Handle the event.
};

change

Fires when the value is changed by the user.

Parameters

maValue String
Value.

maOldValue String
Old value.

Examples

Subscribes to the event:

View:

<ma-text-box
    value="address"
    change="change(maValue, maOldValue)">
</ma-text-box>

Controller:

$scope.change = function(address) {
    // Handle the event.
};

focus

Fires when the component gets focus.

Parameters

maValue String
Value.

Examples

Subscribes to the event:

View:

<ma-text-box
    value="address"
    focus="focus(maValue)">
</ma-text-box>

Controller:

$scope.focus = function(address) {
    // Handle the event.
};

reset

Fires when the value is reset.

Examples

Subscribes to the event:

View:

<ma-text-box
    reset="reset()">
</ma-text-box>

Controller:

$scope.reset = function() {
    // Handle the event.
};

validate

Fires when the value is validated.

Parameters

maValue String
Value entered by the user.

Examples

Subscribes to the event:

View:

<ma-text-box
    validate="validate(maValue)">
</ma-text-box>

Controller:

$scope.validate = function(value) {
    // Handle the event.
};

API

clear()

Clears the value and sets the component to the initial untouched state.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    textBox.clear();
}, 5000);

failedValidator()

Returns a validator which has not passed the validation.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    var failedValidator = textBox.failedValidator();
}, 5000);

focus()

Sets focus on the component.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    textBox.focus();
}, 5000);

isInitialized

Determines whether the component is initialized.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    var isInitialized = textBox.isInitialized;
}, 5000);

isValid()

Determines whether the value of the component is valid.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    var isValid = textBox.isValid();
}, 5000);

isTouched()

Determines whether the user has interacted with the component.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    var isTouched = textBox.isTouched();
}, 5000);

validate()

Validates the value and highlights the component accordingly.

Examples

View:

<ma-text-box
    instance="textBox">
</ma-text-box>

Controller:

$scope.textBox = {};

$timeout(function() {
    textBox.validate();
}, 5000);
⚠️ **GitHub.com Fallback** ⚠️