Text-mask: Dynamically applying mask - e.map is not a function error

[LXensen]

I'm trying to dynamically apply the mask to an input element but I keep getting the error

e.map is not a function

I've seen #139 and #159 but I've used the array 'fix' and still doesn't work

Here is my view:

<div class="card-body" *ngIf="field?.structure.type == 'Textbox' && field?.structure.visible">

   <input type="Textbox" *ngIf="field?.structure.mask" [textMask]="field.structure.mask" [(ngModel)]="field.structure.value" name="{{field.fieldId}}" style="width:70%">

</div>

My model is defined as

      "structure": {

        "label": "Postal Code ",

        "mask": "{mask: postalMask}"
}

And my component:

  ngOnInit() {

    this.postalMask = [/[A-Z]/i, /\d/, /[A-Z]/i, ' ', /\d/, /[A-Z]/i, /\d/];
}

[wesselvdv]

Set the initial value of your mask to false, then override in your init.

[LXensen]

I don't understand: The mask property expects an array, how do I initialize it with false?

[wesselvdv]

Show us the full code example, I don't see where postalMask is coming from? You're assigning something in your ngOnInit on this.postalMask which is not the same as postalMask.

[LXensen]

That is the complete code. I've defined field input elements in the database. Here is an example:

    {
      "fieldId": 1,
      "orderId": 1,
      "section": 1,
      "structure": {
        "help": "Help text here",
        "label": "Location where the form is being submitted",
        "required": "true",
        "type": "Textbox",
        "value": " ",
       "mask": "{mask: ['(', /[1-9]/, /\\d/, /\\d/, ')', ' ', /\\d/, /\\d/, /\\d/, '-', /\\d/, /\\d/, /\\d/, /\\d/]}",
        "visible": true
      }
    }

The mask is defined in the model. I'm trying to bind the textMask to a property on the data model

[textMask]="model.property"

in this case:

[textMask]="field.structure.mask"

And then the value of postalMask is declared in the component

 public postalMask;
 ngOnInit() {

    this.postalMask = [/[A-Z]/i, /\d/, /[A-Z]/i, ' ', /\d/, /[A-Z]/i, /\d/];
}

If I apply the mask 'directly' it works.

[textMask]="{mask: postalMask}"

But trying to bind to it does

[Mario-Eis]

Same issue. Mask is of type mask?: maskArray | ((input: HTMLInputElement) => maskArray); where maskArray is Array<string | RegExp>. So its not possible to set mask to boolean false. As mask is optional it could be left out. But then the error e.map is not a function happens.

Update: I see. This seems to be an issue of DefinitelyTyped
Update2: https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25129

[reddevilzee]

Fixing my DefinitelyTyped bug fixed my issue.

@Mario-Eis thank you for the hint