我们在我们的应用程序中使用 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="(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].
});
}