PrimeNG 控件未显示无效答案

【问题标题】：PrimeNG Controls are not showing InvalidPrimeNG 控件未显示无效
【发布时间】：2019-06-30 23:26:32
【问题描述】：

我们在我们的应用程序中使用 PrimeNG 自动完成组件。我们会用“红色”显示所有有效的无效。默认情况下，Angular 用 ng-valid 样式类标记所有输入字段，除非我们有任何使控件无效的验证。这似乎是 Angular 中的标准。 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" (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].
                });
            }

【问题讨论】：

任何人都可以帮忙！
请任何人...这让我发疯了
如果您放置一个示例 stackblitz 项目，您将获得更好的响应

标签： angular typescript validation primeng primeng-dropdowns

【解决方案1】：

这已经 2 岁了，但我遇到了这个问题并找到了解决方案。希望它可以帮助其他人。

我正在使用 v.12 的 PrimeNG。

至少对于 p-dropdowns，当元素同时应用了 ng-invalid 和 ng-dirty 类时，边框似乎变为红色。仅当无效时，我才需要边框为红色。我添加了以下覆盖，它为我解决了这个问题。

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

【讨论】：