Angular Реактивная форма не передает выбранные значения параметров - PullRequest
Новая
       3

Angular Реактивная форма не передает выбранные значения параметров

0 голосов
/ 03 марта 2020

У меня есть следующая форма, динамически заполненная несколькими входами выбора 

<form [formGroup]="searchForm" (ngSubmit)="onSubmit(searchForm.value)">
   <div class="col-md-2" *ngFor="let filter of this.filters; index as i">
      <div class="form-group">
        <select formArrayName="filters" size="5" class="form-control" (change)="onSelectChange($event)">
          <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
          <option
            *ngFor="let filterValue of this.filterValues[i].items"
            [ngValue]="filterValue">
              {{ filterValue.name }}
          </option>
        </select>
      </div>
    </div>
</form>

Инициативная форма init: 

this.searchForm = this.formBuilder.group({
  searchString: ['', Validators.required],
  filters: this.formBuilder.array([ ])
});

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

enter image description here

Кроме того, когда я регистрирую e.target.value в моем (изменить) метод, я получаю только выбранное значение опции. Я хочу получить доступ к полному объекту, т.е. { id: 1, name: 'first_filter' }. Разве мне не нужен полный объект, чтобы я мог как-то вернуть его в FormGroup?

1 Ответ

0 голосов
/ 03 марта 2020

Ваша проблема

Вы строите массив выбора в форме. Когда вы отправляете форму, выбранные значения не устанавливаются.

Дизайн

При привязке к массивам форм вы привязываете массив к formArrayName, а каждый элемент управления в массиве - [formControlName]="i".

Решение

Переместите formArrayName="filters" на более высокий уровень и добавьте [formControlName]="i" к выбору. Это свяжет i th select с i th элементом управления в массиве форм.

Я также изменил ваш [ngValue]="filterValue", чтобы использовать filterValue.name для целей моего примера. 

<form [formGroup]="searchForm" (ngSubmit)="onSubmit()">
  <div class="col-md-2" *ngFor="let filter of this.filters; index as i"
    formArrayName="filters">
    <div class="form-group">
      <select [formControlName]="i" size="5" class="form-control" (change)="onSelectChange($event)">
        <option [ngValue]="null" value="-1" disabled class="first-option-item">{{ filter.name }}</option>
        <option
          *ngFor="let filterValue of this.filterValues[i].items"
          [ngValue]="filterValue.name">
            {{ filterValue.name }}
        </option>
      </select>
    </div>
  </div>
  <button>Submit</button>
</form>

ДЕМО: https://stackblitz.com/edit/angular-i3njdo

...