@softeq/angular-masked-data-types

Introduce text-mask support for @softeq/angular-data-types library

Usage no npm install needed!

<script type="module">
  import softeqAngularMaskedDataTypes from 'https://cdn.skypack.dev/@softeq/angular-masked-data-types';
</script>

README

@softeq/angular-masked-data-types

@softeq/angular-masked-data-types extends @softeq/angular-data-types by text-mask support:

  • extends DataType support by adding new MaskedTextType
  • integrates text-mask support for NumberTypes
  • adds sqMaskedTextType directive
  • adds sqMaskedNumberType directive

Setup

  1. Setup @softeq/angular-data-types library as described in this document.
  2. Import SofteqMaskedDataTypesModule to the root application module
     imports: [
       ...
       SofteqDataTypesModule.forRoot({
         typeSet: () => ...,
       }),
       SofteqMaskedDataTypesModule.forRoot(),
       ...
     ],
    

MaskedTextType and sqMaskedTextType

MaskedTextType extends TextType and adds text-mask support.
MaskedTextType is useful only when used together with sqMaskedTextType directive.

The following example defines MaskedTextType

const TwoDigits = maskedTextType({
  mask: [/d/, /d/],
});

maskedTextType factory similar to textType factory, but it accepts two additional optional properties:

Note! TwoDigits should be added into typeSet and properly initialized as described on this page.

The following example shows how to use sqMaskedTextType

<input type="text" sqMaskedTextType="TwoDigits" [ngModel]="value">

This input will allow to type only digits and no more than 2 digits.

sqMaskedTextType directive can accept other text-mask parameters via sqMaskedTextTypeConfig input. Read about all possible parameters in the officical text-mask documentation

<input type="text"
       sqMaskedTextType="TwoDigits"
       sqMaskedTextTypeConfig="{ guide: true }"
       [ngModel]="value">

Note!!! Although mask field fully controls user input, it does nothing with validations. If developer needs to validate user input in the example above, he/she should define type constraints

const TwoDigits = maskedTextType({
  mask: [/d/, /d/],
  constraints: {
    pattern: /^\d\d$/,
  },
});

This example defines type which validates if string-value consists of two digits. So, if string-value contains only one digit, this value will violate pattern constraint.

NumberType and sqMaskedNumberType

@softeq/angular-masked-data-types extends NumberType by text-mask support. NumberType along with sqMaskedNumberType allows to enter localized number values in inputs by mask.

The following example defines NumberType

const Price = numberType(...);

Note! Price should be added into typeSet and properly initialized as described on this page.

This type can be used by sqMaskedNumberType directive

<input type="text"
       [ngModel]="value"
       sqMaskedNumberType="Price">

sqMaskedNumberType formats input content and allows to enter only meaningful characters (numbers, number separators, - character in the beginning).