角度反应形式未提交选定的选项值

Question

我有以下表单，其中包含多个选择输入

<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([ ])
});

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

此外，当我在我的（更改）方法上记录 e.target.value 时，我只得到选定的选项值。我想访问完整的对象，即{ id: 1, name: 'first_filter' }。我不需要完整的对象，以便我可以以某种方式将它返回给 FormGroup 吗？

Answer 1

你的问题

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

设计

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

解决办法

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

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