Question

我正在使用反应形式从输入中获取数据。它工作正常，但是随后我不得不从 ul＆li

的html标签中获取所选选项的值

我使用了与输入值相同的方法，但是现在出现错误。

研究之后，我知道不能在 li

中使用formControlName

问题：此问题的解决方法是什么？我应该选择Select Option，还有其他方法吗？

.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

Answer 1

您可以创建一个包装ul / li的组件。当此组件实现ControlValueAccessor接口时，它的行为类似于支持formControlName指令的任何其他“输入”字段。

您可以关注this instruction。

使用响应式表单将<li>标记与formControlName，FormBuilder连接

1 个答案: