Элементы управления PrimeNG не отображаются неверно

Question

Мы используем компонент автозаполнения PrimeNG в нашем приложении. мы бы показали все действительные недействительными с "красным". По умолчанию Angular помечает все поля ввода классом стиля ng-valid, если только у нас нет проверки, которая делает элемент управления недействительным. Это кажется стандартным в Angular. PrimeNg Control не ведет себя одинаково.

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

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="[phone]" formControlName="phone" (onBlur)="checkValidity();" unmask="true"  styleClass="form-control" [style]="{'width': '100%','height':'34px'}"  id="phoneId"  placeholder="Phone (required)"></p-inputMask>

                                    </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" (onBlur)="checkValidity()" [suggestions]="iOffice" forceSelection="true" placeholder="Office (required)" inputStyleClass="form-control" (completeMethod)="searchOffice($event)" [style]="{'width': '100%','display': 'inline-flex','height':'34px'}" field="ORG_BRH_ADDR_LN" dataKey="ORG_BRH_NO" [dropdown]="true"></p-autoComplete>

                                </div>

Код TS

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

            });

        checkValidity(): void {
                Object.keys(this.ersaForm.controls).forEach((key) => {
                    console.log('inside validation');
                    this.ersaForm.controls[key].markAsDirty;
                //    this.ersaForm.controls[key].
                });
            }

Answer 1

Сейчас ему 2 года, но я столкнулся с этой проблемой и нашел решение. Надеюсь, это поможет другим.

Я использую PrimeNG версии 12.

По крайней мере, для p-раскрывающихся списков кажется, что граница меняется на красный, когда элемент имеет оба а также классы применили к нему. Мне нужно, чтобы граница была красной только тогда, когда она недействительна. Я добавил следующее переопределение, которое решило проблему для меня.

      p-dropdown.ng-invalid > .p-dropdown {
    border-color: #f44336; // This color HEX value comes from PrimeNG.
}