I have the following form dinamically populated with multiple select inputs
<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>
Reactive form init:
this.searchForm = this.formBuilder.group({
searchString: ['', Validators.required],
filters: this.formBuilder.array([ ])
});
However I don't have any values on the filter array when I submit the form
Furthermore, when I log e.target.value
on my (change) method I only get the selected option value. I want to access the full object i.e { id: 1, name: 'first_filter' }
. Don't I need the full object so I can return it somehow to the FormGroup?