Angular 反应式表单未提交选定的选项值

Question

我有以下动态填充多个 select 输入的表格

<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>

响应式初始化：

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

但是，当我提交表单时，过滤器数组中没有任何值

此外，当我在我的 (change) 方法上记录 e.target.value 时，我只得到 selected 选项值。我想访问完整的对象，即 { id: 1, name: 'first_filter' }。难道我不需要完整的对象所以我可以 return 它以某种方式发送到 FormGroup 吗？

Answer 1

你的问题

您正在表单中构建一个 select 数组。当您提交表单时，未设置 select 值。

设计

绑定形成数组时，将数组绑定到formArrayName，数组中的每个控件绑定到[formControlName]="i"。

解决方案

将formArrayName="filters"移至更高级别，并将[formControlName]="i"添加到select。这会将第 i 个 select 绑定到表单数组中的第 i 个控件。

为了我的示例，我还修改了您的 [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

Angular 反应式表单未提交选定的选项值

Angular reactive form not submitting selected option values

arrays

angular

select

angular-reactive-forms

option

你的问题

设计

解决方案