How to get conditional mask to work in angular-imask?

[donroyco]

Hi all,

I have this input where the value of the input only should be masked when the value starts with 012 or 123.
The mask should then be of type 000 000 000 0 (10 digits), or no mask at all (max 10 digits entered).

I came up with this setup based on the dynamic mask from the docs, but the mask is not working as expected (see below GIF), the mask jumps from one mask to the other even with starting input 123. What am I missing? Who can help me out?

HTML

<div>
  <input [imask]="imaskCoupon" [unmask]="true" />
</div>

TypeScript

imaskCoupon = {
  mask: [
    {
      lazy: false,
      mask: '# 000 000 0',
      placeholderChar: '\u2000',
      definitions: {
        '#': /^(012|123)/,
      },
    },
    {
      lazy: false,
      mask: '000000000',
      placeholderChar: '\u2000',
    },
  ],
};

Above Angular example is on StackBlitz as a starting point to help me out.

[donroyco]

Answering my own question: I made it work with using dispatch, it will check for the entered value and use the correct mask.

imaskCoupon = {
  mask: [
    {
      lazy: false,
      mask: '000 000 000 0',
      placeholderChar: '\u2000',
      startsWith: '012',
    },
    {
      lazy: false,
      mask: '000 000 000 0',
      placeholderChar: '\u2000',
      startsWith: '123',
    },
    {
      lazy: false,
      mask: '0000000000',
      placeholderChar: '\u2000',
      startsWith: '',
    },
  ],
  dispatch: function (appended, dynamicMasked) {
    const number = (dynamicMasked.value + appended).replace(/\D/g, '');

    return dynamicMasked.compiledMasks.find(function (m) {
      return number.indexOf(m.startsWith) === 0;
    });
  },
};

Working StackBlitz with updated code.