p-inputmask gets dirty when changing mask from model

[mgrzego3]

Describe the bug

When changing mask from ts input gets dirty state. Click "Change mask" button without touching input

<div class="p-grid p-fluid">
  <div class="p-col-12 p-md-6 p-lg-4">
    <span>Basic value={{ val }}</span>
    <p-inputMask
      [required]="true"
      [mask]="mask"
      [(ngModel)]="val"
      #model="ngModel"
      name="surname"
    ></p-inputMask>
    <small
      *ngIf="model.invalid && (model.dirty || model.touched)"
      class="p-error"
    >
      <div *ngIf="model?.errors?.['required']">Surname required</div>
      <div *ngIf="model?.dirty">dirty</div>
      <div *ngIf="model?.touched">touched</div>
    </small>
  </div>

  <p-button (click)="changeMask()">Change mask</p-button>&nbsp;
</div>

import { Component, ViewChild } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  val: string = '';
  mask: string = 'aaa';

  changeMask() {
    this.mask = 'aaaa';
    console.log(this.val);
  }
}

Environment

Ran from ng serve

Reproducer

https://stackblitz.com/edit/primeng-inputmask-demo-mwuq6g?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts,package.json

Angular version

15.1.3

PrimeNG version

15.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.14.0

Browser(s)

firefox, chrome

Steps to reproduce the behavior

1. Run code in description, or in stackblitz
2. Click "Change mask" button
3. Input gets dirty state so required validation is triggered

Expected behavior

Nothing changed, input stays pristine

[bsnk-dev]

+1

[zakharenkov]

Similarly, when visiting an element without editing it. Just place the cursor first on the element with the mask, and then move the focus to another element. I think this is invalid behavior since the user didn't actually change the value, but the element already has the "ng-dirty" class.

[johnmanko]

Similarly, when visiting an element without editing it. Just place the cursor first on the element with the mask, and then move the focus to another element. I think this is invalid behavior since the user didn't actually change the value, but the element already has the "ng-dirty" class.

I can confirm this is an issue.

Originally reported with https://github.com/primefaces/primeng/issues/9251

[smcgillrw]

Seems to be an issue with p-dropdown as well, seeing this behavior with both controls looking at a couple bugs in an application at my organization. Maybe effecting all input types?