p-inputMask ng-model not clearing for invalid value

[rgoal]

I have HTML Page with PrimeNG Controls using reactive forms. PrimeNG controls are not triggered when a control is touched,dirty and invalid (IF a values is typed then cleared). However, if I just tab in then out without inputting any value then it works properly.
example:


Now if I select a value from location autocomplete dropdown thn delete it same for the phone type in a number then deleted , validations are no longer triggered

Code: Select all

<div class="form-group col-xs-3 col-md-3"
                                           [ngClass]="{
                                         'has-error':(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                         !ersaForm.get('phone').valid
                                         }">
                    
                                        <label for="phoneId" class="control-label">Phone</label><br />
                                        <p-inputMask mask="(999) 999-9999" formControlName="phone" (onBlur)="checkValidity();" unmask="true"  styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>
                                        
                                    </div>

**TS**

Code: Select all

 this.ersaForm = this._fb.group({
            phone: new FormControl('', Validators.required),
            gatewayRole: new FormControl('', [Validators.required, Validators.minLength(10)]),
    
            });
    
        checkValidity(): void {
                Object.keys(this.ersaForm.controls).forEach((key) => {
                    console.log('inside validation');
                    this.ersaForm.controls[key].markAsDirty;
                //    this.ersaForm.controls[key].
                });
            }

**F12 (input mask is showing ng-valid even if there is no input)**

Code: Select all

   <p-inputmask _ngcontent-c2="" formcontrolname="phone" id="phoneId" mask="(999) 999-9999" placeholder="Phone (required)" styleclass="form-control" unmask="true" ng-reflect-style="[object Object]" ng-reflect-style-class="form-control" ng-reflect-placeholder="Phone (required)" ng-reflect-unmask="true" ng-reflect-mask="(999) 999-9999" ng-reflect-name="phone" class="ng-touched ng-dirty ng-valid">
    <input pinputtext="" class="form-control ui-inputtext ui-corner-all ui-state-default ui-widget" ng-reflect-ng-class="form-control" ng-reflect-ng-style="[object Object]" type="text" placeholder="Phone (required)" style="width: 100%; height: 34px;"></p-inputmask>
    <div _ngcontent-c2=""> This form is valid: false </div>
<div/>

I sent days on this and it is driving crazyyyyy , why when I type someting then erase it it shows (class="ng-touched ng-dirty ng-valid") ?

[rgoal]

can anyone help please, spent too much time on his issue