Как получить значение моего раскрывающегося списка для каждого флажка, выбранного в Angular8

Question

Я динамически создаю флажки и соответствующие раскрывающиеся списки из данных, которые я получаю из API ....

мой html код ниже ::

<label [for]="i" class="form-check-label fw7 h5 mb0" formArrayName="planDivList" *ngFor="let plan of planForm.controls.planDivList.controls; let i = index">
    <br>
    <input [name]="i" [id]="i" class="form-check-input" type="checkbox" [formControlName]="i">
    {{planDivList[i].planCode}}
    <label *ngIf="planDivList[i].divisions.length > 0" for="inputDiv">
        Divisions
        <select id="inputDiv" formcontrolName='divCtrl'>
            <option *ngFor="let division of planDivList[i].divisions" Value="division.divisionCode">
                {{division.divisionName}}
            </option>
        </select>
    </label>
</label>

мой набор данных

planDivList = [
    { planCode: "B3692", divisions: [] },
    { planCode: "B3693", divisions: [] },
    { planCode: "B67", divisions: [{ divisionCode: "2", divisionName: "Assisted Living " }, { divisionCode: "1", divisionName: "LILC" }] },
    { planCode: "B69", divisions: [{ divisionCode: "3", divisionName: "Four Seasons" }, { divisionCode: "2", divisionName: "Lakeside" }, { divisionCode: "1", divisionName: "Sunrise" }] }
];

ts file:

const selectedPlans = this.planForm.value.planDivList
          .map((checked, index) => (checked ? this.planDivList[index].planCode : null))
          .filter(value => value !== null);

console.log(selectedPlans);

Вот мой стек

https://stackblitz.com/edit/angular-fsgswa?file=src%2Fapp%2Fapp.component.ts

Я могу получить значение выбранного флажка. Но как мне получить значение соответствующего подразделения, которое выбрано для этого флажка в кнопке отправки? Любая помощь приветствуется

Answer 1

Чтобы решить вашу проблему, я предпринял несколько шагов, о которых я расскажу ниже.

1. Создайте массив форм

У вас есть массив данных, для которого у каждого элемента должно быть несколько элементов управления (установите флажок и выберите). Для этого требуется массив форм из групп форм.

Ваша форма - это массив и ничего более, поэтому мы можем просто связать форму с массивом.

Нам нужно будет обратиться к вложенной форме управляйте значениями позже, поэтому сохраните их в свойстве для удобства.

form: FormArray;
private formControls: {
  checkbox: FormControl;
  division: FormControl;
}[];

// initialise component in ngOnInit instead of constructor
ngOnInit() {    
  this.formControls = this.plans.map((plan, i) => {
    const divisionCode = plan.divisions.length > 0 
      ? plan.divisions[0].divisionCode 
      : '';
    return { 
      checkbox: this.fb.control(i === 0),
      division: this.fb.control(divisionCode)
    };
  });

  const formGroups = this.formControls.map(x => this.fb.group(x));
  this.form = this.fb.array(formGroups, this.minSelectedCheckboxes(1));
}

2. Привязать HTML к форме

Вы должны предпочесть обработку отправки формы с помощью (submit) для кнопки (click). (submit) будет обрабатывать все способы отправки формы.

Привязки HTML соответствуют структуре формы, которую мы создали. Обратите внимание, как флажки и элементы управления делением привязываются к i-й группе форм в массиве.

Я бы также рекомендовал максимально использовать вашу модель для создания циклов и ограничить привязку формы к элементу управления формы. директивы.

<form [formGroup]="form" (submit)="onSubmit()">    
  <div *ngFor="let plan of plans; index as i" [formGroupName]="i">
    <label>
      <input type="checkbox" formControlName="checkbox">
      {{plan.planCode}}
    </label>

    <label *ngIf="plan.divisions.length > 0" >
      Divisions
      <select formControlName="division">
        <option *ngFor="let division of plan.divisions"   
          [value]="division.divisionCode">
          {{division.divisionName}}
        </option>
      </select>
    </label>
  </div>  
  <div *ngIf="formInvalid && form.hasError('required')">
    At least one plan must be selected
  </div>
  <button>Enroll</button>
</form>

3. Обработка отправки

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

onSubmit(){
  this.formInvalid = this.form.invalid;    
  if (this.formInvalid) {
    return;
  }

  this.selectedPlans = this.plans
    .map((plan, i) => ({
      planCode: plan.planCode,
      selected: this.formControls[i].checkbox.value,
      divisionCode: this.formControls[i].division.value
    }))
    .filter(x => x.selected);
}

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

DEMO: https://stackblitz.com/edit/angular-qxm8wk