primeng p-autoComplete 组件上的表单验证不起作用

Dre*_*w13 6 primeng angular

我有一个包含多个元素的表单。在该表格中,我有两个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>
Run Code Online (Sandbox Code Playgroud)

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];
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

p-autoComplete我只包含了验证不起作用的组件的表单代码。对于所有其他组件,验证可使用formErrorsvalidationMessages数组进行。我尝试的另一件事是让我的 ts 实现DoCheck,然后使用ngDoCheck只调用validateForm()函数的方法,因为根据 primeng “AutoComplete 要么使用基于 setter 的检查或 ngDoCheck 来实现建议是否已更改以更新 UI”。每当我更改组件的值p-autoComplete但仍然不进行验证时,都会调用此函数。