Angular 反应式表单未提交选定的选项值
Angular reactive form not submitting selected option values
我有以下动态填充多个 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 吗?
你的问题
您正在表单中构建一个 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>
我有以下动态填充多个 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 吗?
你的问题
您正在表单中构建一个 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>