Reactive Forms with PrimeNG Controls not Firing

Question

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:

(See label and box boarders are "RED")

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

HTML

  <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"   styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>
                                    <span class="help-block"   *ngIf="(ersaForm.get('phone').touched || ersaForm.get('phone').dirty ) &&
                                     ersaForm.get('phone').errors">
                                        <span *ngIf="ersaForm.get('phone').errors.phonePBXCheck">
                                            Phone Number does not exist.
                                        </span>

                                    </span>

                                </div>
  <div class="form-group col-xs-3 col-md-3"
                                       [ngClass]="{
                                     'has-error':(ersaForm.get('location').touched || ersaForm.get('location').dirty ) &&
                                     !ersaForm.get('location').valid
                                     }">
                                    <label for="locationId" class="control-label">Location</label>
                                    <p-autoComplete formControlName="location" id="locationId"  [suggestions]="iOffice" forceSelection="true" placeholder="Office (required)" inputStyleClass="form-control" (completeMethod)="searchOffice($event)"  [style]="{'width': '100%','display': 'inline-flex','height':'34px'}"  field="name" dataKey="id" [dropdown]="true"></p-autoComplete>

                                </div>

TS

this.ersaForm = this._fb.group({
            location: ['', Validators.required],
            phone: ['', [Validators.required, phoneCheck('')]],

        });

function phoneCheck(phone: string): ValidatorFn{


    return (c: AbstractControl): { [key: string]: boolean } | null => {

          some logic
        };
        return null;
    };
}

What is Missing !

****************************************UPDATE*********************************************

I took the custome validtor out

<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

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)

<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>

Answer 1

Reactive form validation is not firing with p-dropdown --------------------------------------enter code here-------------------

HTML

<p-dropdown [options]="lineNumbers" formControlName="Selectedline" [class.is-invalid]="Selectedline.dirty && Selectedline.touched" styleClass="form-control" placeholder="Select Line" [filter]="false" ></p-dropdown>
                          <div *ngIf="Selectedline.dirty && Selectedline.touched">
                                <small *ngIf="Selectedline.errors?.required" class="text-danger">Line Number is required</small>
                              </div>
                        </div>

TS

ngOnInit() {
    this.createIOForm = this.fb.group({
      Selectedline: ["", Validators.required]


    });
  }

  Selectedline() {
    this.createIOForm.get("Selectedline");
  }

Answer 2

Try marking as dirty to trigger validation. If you look at the documentation for p-inputmask you will see that you can probably use (onBlur). And for dropdown you can use (onChange).

Here is an example...

in .html file

<p-inputMask mask="(999) (onBlur)="checkValidity();" ...</p-inputMask>
...
<p-dropdown ... (onChange)="checkValidity(); "></p-dropdown>

In .ts file

 public checkValidity(): void {
        Object.keys(this.ersaForm.controls).forEach((key) => {
            this.formGroup.controls[key].markAsDirty();
        });
    }