Angular 9 dynamic ngx-mask issue

Question

I have the following input

<input
  [(ngModel)]="myInput"
  mask="00-0000-0000||00-00000-0000"
  type="text"
>

and I would like to initialize it with a certain value. Let's say 12-12345-1234.

This doesn't work since I only see 12-1234-5123 (The last digit is cut out of the html input and the shortest possibble mask is being used).

I would like to be able to initialize my input with any valid value and see the correct mask applied to it.

Answer 1

To setup a DOM initial Value, you can use the value attribute on the HTML template:

<input type="text" value="any-value-here">

The mask you are trying to use is a production of DOM manipulation logic. It will be achived by running JavaScript code, which modifies the DOM, and depending on the framework you use, or the lib you create the input mask effect, will always overwrite that 'initial' value.

In you case, using [(ngModel)] is not a strict initialization: it's already a value binding "event" made by angular as far as I know. To test your logic, I think it would be a better approach to create tests, or add the mask dynamically to the field if possible.