我有一个包含几个元素的表格。在该表单中,我有两个primeng p-autoComplete
组件。由于某种原因,我的反应式表单验证未在这些组件上被检测到,但是在表单的所有其他组件上被检测到。
html:
<form [formGroup]="formGroup" (submit)="onSubmit()">
<div class="ui-g">
<div class="ui-g-6">
<label>Generator Name</label>
<div class="ui-inputgroup">
<p-autoComplete name="name" formControlName="gen" [suggestions]="hint"
(completeMethod)="filter($event)" field="name"
[forceSelection]="true" [dropdown]="true" placeholder="Select"></p-autoComplete>
<div *ngIf="formErrors['gen']">
{{formErrors['generator']}}
</div>
</div>
</div>
</div>
</form>
ts:
hint: Gen[];
ngOnInit() {
this.createForm();
this.initVariable();
}
initVariable() {
this.formErrors = {
'gen': '',
};
this.validationMessages = {
'gen': {
'required': 'Gen is required'
}
};
}
createForm() {
this.formGroup = this.fb.group({
gen: [null, Validators.required]
});
this.formGroup.valueChanges.subscribe(() => this.onValueChanged());
this.onValueChanged();
}
onValueChanged() {
if (this.formGroup === null || this.formGroup === undefined) {
return;
}
validateForm(this.formGroup, this.formErrors, this.validationMessages);
}
validateForm(form: FormGroup, formErrors, validationMessages) {
for (const field in formErrors) {
if (formErrors.hasOwnProperty(field)) {
formErrors[field] = '';
const control = form.get(field);
if (control && control.dirty && !control.valid) {
const error = lookupError(control, validationMessages[field]);
setErrorIfExists(formErrors, field, error);
}
}
}
}
function lookupError (control, messages) {
for (const key in control.errors) {
if (control.errors.hasOwnProperty(key)) {
return messages[key];
}
}
}
我只包含了p-autoComplete
组件的表单代码,其中的验证无效。对于所有其他组件,可以使用formErrors
和validationMessages
数组进行验证。我尝试做的另一件事是让我的ts实现DoCheck
,然后有了ngDoCheck
方法,该方法只调用validateForm()
函数,因为根据primeng“ AutoComplete要么使用基于setter的检查方法,要么使用ngDoCheck来实现如果建议已更改以更新UI”。每当我更改p-autoComplete
组件的值但确实不进行验证时,都会调用此方法。