html - 连接
问题描述
我正在使用反应形式从输入中获取数据。它工作正常,但是我不得不从ul & li的 html 标签中获取所选选项的值
我使用了与输入值相同的方法,但现在出现错误。
研究时,我知道 formControlName 不能在li中使用
问题:解决这个问题的方法是什么?我应该选择选择选项,还有其他方法吗?
.ts 文件
this.filtersForm = this.fb.group({
budgetPrice: this.fb.group({
gte: '',
lte: ''
}),
parcelArea: this.fb.group({
gte: '',
lte: ''
}),
accommodationArea: this.fb.group({
gte: '',
lte: ''
}),
accommodationBedrooms: this.fb.group({
eq: ''
})
});
this.filtersForm.valueChanges
.pipe(debounceTime(1000))
.subscribe(e => {
this.filterCriteriaChanged.emit(this.filtersParam(e));
console.log('filter: ',e)
});
.html 文件
<form [formGroup]="filtersForm">
<div formGroupName="accommodationBedrooms">
<ul class="noOfItems" formControlName="eq">
<li *ngFor="let bedroom of bedrooms" [value]="bedroom.value" (click)="onSelectValue($event)">{{ bedroom.value }} </li>
</ul>
</div>
</form>
错误
带有路径的表单控件没有值访问器:'accommodationBedrooms -> eq
解决方案
您可以创建一个包装您的 ul / li 的组件。当此组件实现 ControlValueAccessor 接口时,它可以像任何其他“输入”字段一样运行,支持 formControlName 指令。
您可以按照此说明进行操作。
推荐阅读
- c# - 如何使用 ASP.NET C# 将图像动态添加到 Gridview Databound
- django - 使用 ajax 和 django 搜索数据并重定向到相关页面
- reactjs - 为什么我在映射数组中出现“不是函数”错误
- r - 无法下载 MRIInstruments
- ios - Swift - 如何识别子视图的手势交互哪个部分位于父视图之外
- json - SQL Server:在 Json 对象数组中查找值的问题
- r - R中增加内存限制是否危险?
- javascript - Chrome Extension: How to Signing in users directly?
- python - 多维数据的 RMSE
- android - 将 Facebook OAuth 与 Android 模拟器一起使用时重定向到 10.0.2.2 时出现问题