Реактивные формы с элементами управления PrimeNG не запускаются

Question

У меня есть HTML-страница с элементами управления PrimeNG, использующими реактивные формы.Элементы управления PrimeNG не срабатывают, если к элементу касаются, грязные и недействительные (ЕСЛИ значения вводятся, а затем очищаются).Тем не менее, если я просто вкладываю, затем не вводю никакого значения, оно работает правильно.

пример:

(см. Метки и рамки "КРАСНЫЕ")

Теперь, если я выберу значение из раскрывающегося списка автозаполнения местоположения, то удалите его так же для типа телефона в номере, а затем удалили, проверки больше не запускаются

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

Чего не хватает!

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

Я забрал валидатор обычного пользователя

<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 (маска ввода показывает ng-valid, даже если естьнет ввода)

<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

Попробуйте пометить как грязный для запуска проверки.Если вы посмотрите документацию для p-inputmask, вы увидите, что вы, вероятно, можете использовать (onBlur).А для выпадающего вы можете использовать (onChange).

Вот пример ...

в файле .html

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

В файле .ts

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