Angular Formarray выберите выпадающий список

Question

Когда я изменяю критерии (зависит от выбранных критериев, изменятся данные в параметре выбора), я могу выбрать параметр. Но после добавления большего количества строк, когда я изменяю один критерий, он меняет раскрывающийся список выбора всех параметров во всех строках

Вот ссылка моей проблемы в стеке : https://stackblitz.com/edit/stackoverflow-49722349-6pvgkh

ожидаемое поведение : когда я выбираю только критерии этот параметр строки нужно изменить, это не повлияет на другие параметры строк.

Answer 1

Проверьте это stackblitz для рабочего примера.

<code><form [formGroup]="profileForm">

    <h1>Profile Form</h1>

    <div>
        <label for="first-name-input">First Name</label>
        <input type="text" id="first-name-input" formControlName="firstNameInput">
  </div>

  <div>
        <label for="last-name-input">Last Name</label>
        <input type="text" id="last-name-input" formControlName="lastNameInput">
  </div>

    <div formArrayName="optionGroups">

        <div *ngFor="let $optionGroup of profileForm.controls['optionGroups'].controls;  let $index=index">

            <h4>Option {{ $index + 1 }} </h4>

            <div [formGroupName]="$index"> 
                <label for="select-input">Criteria</label>

                <select id="{{ 'select-input' + $index }}" formControlName="selectInput">
          <option value="0" disabled selected>Select a Criteria</option>
          <option *ngFor="let select of selects" [value]="select.name">{{select.id}}</option>
        </select>

                <label [for]="'where-input-' + $index">Option</label>
                <select [id]="'where-input-' + $index" formControlName="whereInput">
          <option value="0" disabled selected>Select a Option</option>
          <option *ngFor="let where of getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)" [value]="where.name">
            {{where.id}}
          </option>
        </select>

                <button type ="button" (click)="removeOptionGroup($index)">X</button>

            </div>

        </div>

    </div>

  <button type="button" (click)="addOptionGroup()">Add Options</button>

  <div>
        <button type="button" (click)="saveProfileForm()">Send</button>
  </div>

</form>

<pre>
{{ profileForm.value | json }}

Важной частью является то, что после выбора «критерия» появляется список «Опции» следует обновить с помощью этой функции:

  getWheresFor(inputStr: string): Where[] {
    return this.dropdownservice
      .getWhere()
      .filter(item => item.selectid === inputStr);
  }

вызывается из вашего html следующим образом:

getWheresFor(profileForm.controls['optionGroups'].controls[$index].controls['selectInput'].value)"

Также вы можете сократить выражение, как это, используя переменную $optionGroup:

getWheresFor($optionGroup.controls['selectInput'].value)"

ОБНОВЛЕНИЕ

select [id]="'where-input-' + $index"

Это будет генерировать уникальные идентификаторы в DOM для каждого элемента select. Типичный пример использования: элемент label, который имеет атрибут for, например:

<label [for]="'select-input' + $index">Criteria</label>
<select id="{{ 'select-input' + $index }}" formControlName="selectInput">

. Эта разметка будет генерировать элементы типа dom следующим образом:

Использование этого в том, что теперь пользователь может щелкнуть текст надписи, и элемент select получит фокус.