使用 Reactive Forms 将 <li> 标记与 formControlName、FormBuilder 连接答案

【问题标题】：connecting <li> tag with formControlName, FormBuilder using Reactive Forms使用 Reactive Forms 将 <li> 标记与 formControlName、FormBuilder 连接
【发布时间】：2019-07-10 14:19:50
【问题描述】：

我正在使用响应式表单从输入中获取数据。它工作正常，但是我不得不从 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 -> 情商

【问题讨论】：

你有问题吗？ :D 你说不能在 li 标签上设置表单控件，这是正确的:)
我需要知道解决这个问题的方法：-/

标签： html angular angular-reactive-forms formgroups

【解决方案1】：

您可以创建一个包装您的 ul / li 的组件。当这个组件实现 ControlValueAccessor 接口时，它可以像任何其他“输入”字段一样工作，支持 formControlName 指令。

您可以关注this instruction。

【讨论】：