Модель угловой реактивной формы - отправить значение, а не описание

Question

У меня большая проблема с Angular 2+.Я создал фильтр комбинированного списка, который работает со словарными данными из массива, подобного этому

[{
  value: 'fb',
  description: 'football'
}]

Пользователь может выбрать один из элементов словаря из отфильтрованного списка или записать значение в элемент ввода, запустив фильтр.

После этого приложение проверяет правильность формы (словарь из формы существует в описаниях и т. Д.).Я связываю ввод с формой, используя тег [value].

<input type="text" [value]="getSelectedSport.description"

Проблема - мой бэкэнд принимает только 'value' из модели, но в данный момент я отправляю описание.Я могу решить эту проблему, изменив

getSelectedSport.description 

на

getSelectedSport.value, 

, но это не правильно, потому что в форме я получаю только 'значение' (короткое) значение поля.

Как я могу изменить значение формы, не меняя представления?Я не могу использовать событие submit для преобразования данных, потому что я получаю эту форму из родительского элемента: (

<input class="form-control" type="text" (focus)="toggleVisible(true)" (blur)="handleBlur()" (keydown)="handleSelectActions($event)"
        [formControl]="selectedSport" [value]="getSelectedSport.value" [maxLength]="longestDescription">
      <ul class="select" [ngClass]="(isOptionVisible) ? 'isVisible' : 'isNotVisible'">
        <li *ngFor="let item of filterModel; index as i" class="option" (click)="selectItem(item.description)"
           [attr.data-order]="i" [ngClass]="this.focusedIndex === i ? 'selected' : ''">
          {{item.description}}
        </li>
      </ul>

ts файл (некоторые методы, ниже ссылка на весь файл)

public get getSelectedSport(): AbstractControl {
    return this.selectedSport;
  }

public selectItem(item: any) {
    this.isOptionVisible = false;
    this.selectedSport.setValue(item)
  }

public handleBlur() {
    if (this.selectedSport.valid){
      this.isOptionVisible = false;
    }
  }

private selectViaEnter() {
    this.selectItem(this.filterModel[this.focusedIndex].description);
    this.focusedIndex = 0;
  }

https://github.com/Kamilnaja/filterComboBox/blob/master/src/app/combo/combo.component.ts https://github.com/Kamilnaja/filterComboBox/blob/master/src/app/combo/combo.component.html

Answer 1

После некоторого времени попытки решить эту проблему с помощью ошибки завершения пробного периода, я нашел ответ.По сути, мы хотим отображать значение формы, используя описание, и отправлять значение модели при отправке.Почему бы не использовать две формы.

В файле ts я добавил еще один элемент управления формы, который обрабатывает все действия, но имеет другое formControlName, чем первая группа форм из родительского.

Когда значение формы выглядит правильноЯ обновляю оба поля ввода, используя правильное значение моего объекта.Ниже некоторого углового псевдокода:

export class myComponent {
    myNewFormControl: FormGroup = new FormControl('');

    public selectItem(item: any) {
        this.isOptionVisible = false;
        this.selectedSport.setValue(item.value);
        this.myNewFormControl.setValue(item.description);
    }
}

Итак, теперь я могу удалить эту первую форму, вызывающую ошибку, из HTML и отобразить в форме то, что мне нужно, описание модели.

<input formControlName="myNewFormControl" value=[item.description] /><!-- and other actions also here -->

При отправке,Форма также представляет значение, которое мне нужно, поэтому я думаю, что это правильный ответ.