我们在应用程序中使用PrimeNG autoComplete组件。我们将用“红色”显示所有有效无效。 默认情况下,除非我们进行任何使控件无效的验证,否则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].
});
}