ngx-mask Causes Input Form Controls to be Dirty and Touched on iOS Devices

[spdeux]

I'm facing a problem with ngx-mask while using it on input form controls in Angular.

1.On page load, input text boxes with ngx-mask are immediately marked as touched and dirty, causing validation error messages to appear even though the user has not interacted with these fields.

Dropdown Interaction:
2.We have a dropdown menu for countries. When 'USA' is selected, an input field for the Social Security Number (SSN) is displayed. This SSN input field is initially hidden. Upon displaying the SSN input field, it is immediately marked as touched and dirty, resulting in an inline error message appearing without any user interaction.

Angular Version: 14.2.10
ngx-mask Version: 10.0.4 (have 2 version of ngx-mask in my package.json file: peerDependecies have the ngx-mask: "8.1.7" and devDependencies: 10.0.4. The issue is still persisting even after upgrading the ngx-mask 10.0.4 to version 14.2.4)

Kindly provide a solution to ensure that input fields with ngx-mask maintain an untouched and pristine state upon page load and when dynamically shown based on user selections.

Thank you for your attention to this matter.

[Emaxan]

The same issue is on the web platform (Chrome 126.0.6478.182 (Official Build) (64-bit)). Inputs appear dirty on page loading when value is provided.

private _fb = inject(FormBuilder);
private _form = this._fb.group({
    currencyInput: this._fb.control<string | null>('10'),
});

<input
    formControlName="currencyInput"
    prefix="$"
    mask="separator.2"
    [allowNegativeNumbers]="true"
    thousandSeparator=","
    [dropSpecialCharacters]="true"
></input>

Versions:
"ngx-mask": "^17.0.8",
"@angular/core": "^17.3.10",

[stijnluyten]

We're having the same issue. Input is dirty when the input is touched and not changed.