connecting <li> tag with formControlName, FormBuilder using Reactive Forms

Question

I am using reactive forms to get the data from inputs. it works fine, however then i had to take the value of the selected option from html tags of ul & li

I used the same method as i was using for input values, but now getting an error.

When researched, i got to know formControlName cant to be used in li

Question: What is the work around for this? should i go for Select Option, any other approach?

.ts file

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 file

<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>

Error

No value accessor for form control with path: 'accommodationBedrooms -> eq

So do you have a question? :D You are stating that a formcontrol cannot be set on a li tag, which is corrent :) — AJT82

bys bys · Accepted Answer · 2019-02-16T20:19:11

You can create a component that wraps your ul / li. When this component implements the ControlValueAccessor interface it can behave like any other "input" field, supporting the formControlName directive.

You may follow this instruction.

connecting <li> tag with formControlName, FormBuilder using Reactive Forms

1 Answers