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

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

0 голосов
/ 07 февраля 2019

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

enter image description here

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

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" (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].
                });
            }
...