Как проверить ввод с помощью Angular Autocomplete

Question

Мне нужна помощь.

Я использую Angular Material.

Моя проблема связана с отображением / отключением мат-ошибок при использовании автозаполнения.

В моем коде есть форма с функцией автозаполнения. Входные данные вызывают объект JSON в качестве ответа.

       { name: 'Paul', id: 1 }

На этом этапе необходимо показать [имя], когда он выбран в опции выбора, во входных данных. И установите значение параметра на [id].

Нет проблем, я закончил.

[displayWith] = "displayFn"

Ничего страшного, все работает как надо, но я не знаю, как проверить [id] как число. Каждый раз, когда я пробовал это, просто проверял ввод [имя] как строку.

Зачем мне это нужно? Итак, я буду использовать только [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 устанавливает вход НЕВЕРНЫЙ, когда имя выбирается из входа.

Большое спасибо за любую помощь.

Answer 1

Мое решение,

Здесь, в Stackru, я нашел подход к решению: Угловой материал: как проверить автозаполнение по предлагаемым параметрам?

То, что было нужно, просто, мне пришлось создать собственную функцию валидатора, такую ​​как:

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()]],

Надеюсь, это поможет кому-то другому.