• Public
  • Public/Protected
  • All

Text field powered by Angular Material and ngx-mask libraries.

Example of usage

Simple text field

export const component: DraymanComponent = async ({ forceUpdate }) => {
    let name = '';
    let typing = false;

    return () => {
        // User started typing
        const onValueChangeStart = async () => {
            typing = true;
            await forceUpdate();

        // User stopped typing with some `value`
        const onValueChange = async ({ value }) => {
            typing = false;
            name = value;
            await forceUpdate();

        return <div>
                {name && <p>Hello, {name}!</p>}
                <p>{typing ? `You are typing!` : `You aren't typing!`}</p>

Text field with autocomplete and remote result caching.

import axios from 'axios';
import _ from 'lodash';

const getCountriesFromCache = _.memoize(async (value) => {
    const result = await axios.get(`https://api.first.org/data/v1/countries?q=${value}&limit=10`);
    return Object.values(result.data.data).map((x: any) => ({ value: x.country, label: x.country }));

export const component: DraymanComponent = async ({ forceUpdate }) => {

    let countries: { value: string; label: string; }[] = [];
    let searchValue = '';

    const getCountries = async () => {
        countries = await getCountriesFromCache(searchValue);
        await forceUpdate();

    return () => {
        return (
                    async () => {
                        if (!countries.length) {
                            await getCountries();
                    async ({ value }) => {
                        searchValue = value;
                        await getCountries();




Optional appearance

appearance: "legacy" | "standard" | "fill" | "outline"

Appearance style for the field. Wether outline (default), legacy, fill or standard.

Optional disabled

disabled: boolean

Whether the control is disabled.

Optional error

error: string

Error text to be shown underneath the form field control.

Optional focused

focused: boolean

Input will be focused on appearance if set to true.

Optional helpText

helpText: string

Hint text to be shown underneath the form field control.

Optional label

label: string

The floating label for a field.

Optional mask

mask: { allowNegativeNumbers?: boolean; emitSpecialCharacters?: boolean; expression?: string; leadZeroDateTime?: boolean; prefix?: string; showMaskTyped?: boolean; suffix?: string; thousandSeparator?: string }

Input mask options.

Type declaration

  • Optional allowNegativeNumbers?: boolean

    If mask will allow the use of negative numbers.

  • Optional emitSpecialCharacters?: boolean

    Should value be emitted with charaters added by mask.

  • Optional expression?: string

    Expression that constrains user input. If it exists, autocomplete suggestions will not work. You can check available mask options here - https://jsdaddy.github.io/ngx-mask-page.

  • Optional leadZeroDateTime?: boolean

    If the leadZeroDateTime parameter is true, skipped symbols of date or time will be replaced by 0.

  • Optional prefix?: string

    Prefix for the input.

  • Optional showMaskTyped?: boolean

    If mask is shown while typing, or not.

  • Optional suffix?: string

    Suffix for the input.

  • Optional thousandSeparator?: string

    If mask is separator, defines which character will separate thousands.

Optional onEnter

onEnter: ElementEvent<{ value: string }>

Executed with current value when ENTER key is pressed or an option from suggestions is selected.

Optional onFocus

onFocus: ElementEvent<{}>

Executed when autocomplete field is focused.

Optional onValueChange

onValueChange: ElementEvent<{ value: string }>

Executed with an input value from user.

Optional placeholder

placeholder: string

The placeholder text.

Optional ref

ref: string

Optional style

style: CSS

Optional suggestions

suggestions: { label: string; value: any }[]

Autocomplete suggestions.

Optional suggestionsPanelWidth

suggestionsPanelWidth: string | number

Specify the width of the autocomplete panel. Can be any CSS sizing value, otherwise it will match the width of its host.

Optional type

type: "text" | "password"

Optional updateOnBlur

updateOnBlur: boolean

Wether value of the field should be emitted when user is blurred out of the control.

Optional value

value: string

Value of the input.