ERROR TypeError: Cannot read property 'length' of undefined

[MoistJohn]

🐞 bug report

Is this a regression?

I believe it is not a regression.

Description

When masking an input, that is using a formControl, and the value of the formControl is set to
undefined
An exception is thrown from _validateTime.

🔬 Minimal Reproduction

https://stackblitz.com/edit/angular-ivy-1cnarw67657?devtoolsheight=33&file=src/app/app.component.ts

🔥 Exception or Error

core.umd.js? [sm]:6469 ERROR TypeError: Cannot read property 'length' of undefined
    at MaskDirective._validateTime (ngx-mask.umd.js:1625)
    at MaskDirective.validate (ngx-mask.umd.js:1328)
    at eval (forms.umd.js:1067)
    at eval (forms.umd.js:1050)
    at Array.map ()
    at executeValidators (forms.umd.js:1050)
    at eval (forms.umd.js:1003)
    at eval (forms.umd.js:1050)
    at Array.map ()
    at executeValidators (forms.umd.js:1050)

🌍 Your Environment

Angular Version:
From the stackblitz package.json:

"@angular/animations": "^11.0.8",
    "@angular/common": "^11.0.8",
    "@angular/compiler": "^11.0.8",
    "@angular/core": "^11.0.8",
    "@angular/forms": "^11.0.8",
    "@angular/platform-browser": "^11.0.8",
    "@angular/platform-browser-dynamic": "^11.0.8",
    "@angular/router": "^11.0.8",
    "ngx-mask": "^11.1.4",

Anything else relevant?

Looking at the GitHub code, it seems the issue is located here

Where the value is checked to avoid null access, but not undefined.

The issue happened for me when trying to use Formly (a dynamic forms library) and resetting the form via their API. I do not know why they reset to undefined and not null, but they do.

Thanks!

[KingDarBoja]

Same issue as soon as I added the prefix input to the custom formly input: angular-ngx-mask-formly

[NepipenkoIgor]

@MoistJohn @KingDarBoja Hi. Thank you for using our package. Please try v12.0.0

[KingDarBoja]

It is still showing the same error, you can try my stackblitz, which is already updated with ngx-mask v12.0.0

Nevermind, it is working after setting the prefix value to an empty string.

export class PhoneMaskTypeComponent extends FieldType {
  @ViewChild(MatInput) formFieldControl!: MatInput;

  get type() {
    return this.to.type || 'text';
  }

  get mask() {
    return this.to.mask || '(000) 000-0000';
  }

  get prefix() {
    return this.to.prefix || ''; // <-- Do this
  }
}