如何使用Angular Autocomplete验证输入

如何解决如何使用Angular Autocomplete验证输入

我需要一些帮助。

我正在使用Angular Material。

我的问题是关于使用自动完成功能时显示/显示垫错误。

在我的代码中，我有一个带有自动完成输入的表单。输入调用JSON对象作为响应。

{ name: 'Paul',id: 1 }

这时，需要在输入中显示在选择选项上选择的[名称]。并将选项值设置为[id]。

没问题，我已经解决了。

[displayWith] =“ displayFn”

没关系，一切都可以正常工作，但是我不知道如何将[id]验证为数字。每次尝试使用它时，只需将输入[name]验证为字符串即可。

为什么我需要那个？因此，我将仅使用[id]来构建表单对象[ownerId]。

<input id="ownerId" type="text" matInput formControlName="ownerId" [matAutocomplete]="auto" placeholder="Digite para pesquisar..." name="doNotAutocomplete" autocomplete="doNotAutoComplete" required>
<mat-autocomplete autoActiveFirstOption #auto="matAutocomplete" [displayWith]="displayFn">
  <mat-option *ngFor="let option of owners" [value]="option">
      {{option.name}}
  </mat-option>
</mat-autocomplete>
<mat-error>Selecione ou cadastre um novo proprietário.</mat-error>

    // Set display owner name on input form - id on value
    displayFn(owner: Owner): any {
        return owner && owner.name ? owner.name : '';
    }

        // Horizontal Stepper form steps
        this.formGroup = this.formBuilder.group({
            formArray: this.formBuilder.array([
                this.formBuilder.group({
                    ownerId: ['',[Validators.required],code: ['',Validators.required],agent: ['',Validators.required]
                }),

从输入中选择名称时，mat-error会将输入设置为无效。

非常感谢您的帮助。

解决方法

我的解决方案，

在Stackoverflow中，我找到了一种解决方法：角材料：How to validate Autocomplete against suggested options?

所需要的很简单，我必须创建和自定义验证程序功能，例如：

function ownerIdValidator(): ValidatorFn {
  return (control: AbstractControl): { [key: string]: any } | null => {
    if (typeof control.value === 'string') {
      return { 'invalidAutocompleteObject': { value: control.value } };
    }

    return null;  /* valid option selected */
  };
}

并在此处添加：

this.formGroup = this.formBuilder.group({
  formArray: this.formBuilder.array([
    this.formBuilder.group({
       ownerId: ['',[Validators.required,ownerIdValidator()]],

我希望它可以帮助其他人。