соединение тега <li>с formControlName, FormBuilder с использованием Reactive Forms - PullRequest
Новая
       32

соединение тега <li>с formControlName, FormBuilder с использованием Reactive Forms

0 голосов
/ 16 февраля 2019

Я использую реактивные формы для получения данных из входных данных.он работает нормально, однако тогда мне пришлось взять значение выбранной опции из тегов html: ul & li

Я использовал тот же метод, который я использовалдля входных значений, но теперь получаю ошибку.

При исследовании я узнал, что formControlName не может быть использован в li

Вопрос: Как обойти это?я должен пойти на выбор варианта, любой другой подход?

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

Ошибка

Нет доступа к элементу управления для формы с путем: 'размещениеСпальни -> экв

1 Ответ

0 голосов
/ 16 февраля 2019

Вы можете создать компонент, который обернет ваш ul / li.Когда этот компонент реализует интерфейс ControlValueAccessor, он может вести себя как любое другое поле ввода, поддерживая директиву formControlName.

Вы можете следовать этой инструкции .

...