Дублируйте Dynami c Поле выбора, используя Angular 6+ Form Array

Question

Выберите поле 1 " Путь ". Поле выбора 2: « SkillSet ».

Я пытаюсь продублировать группу полей выбора (Path и SkillSet) на основе нажатия кнопки. Поэтому, когда я нажимаю кнопку «Добавить», элемент формы «Поле выбора» («Путь и набор навыков») дублируется. Подвох в этом заключается в том, что опции элемента "Skillset" в блоке выбора являются динамическими c, поскольку он зависит от поля выбора "Путь".

Проблема ниже: Step1 : Выбор пути в качестве BackEnd и Skill будет заполняться на основе пути. Во втором поле выбора выбрано Java8.

Step2 : при нажатии кнопки «Добавить» поле выбора «Путь и навык» дублируется. Теперь выбрав поле выбора Path как FrontEnd.

Step3 : После выбора Path в качестве FrontEnd во втором ряду, выбранный навык в первом ряду сбрасываются на пустой. (На картинке я добавил два Пути)

Демонстрация StackBlitz для выпуска: https://stackblitz.com/edit/angular-duplicate-dynamic-select-box?file=null

Ожидание: я должен выбрать каждый путь и соответствующий навык. Например, если я выбрал 3 разных пути, мне нужно выбрать 3 разных навыка в 3 разных рядах полей выбора.

Я пробовал много решений. Ничего не получается. Может ли кто-нибудь помочь в этом случае .?

Извините за мой Engli sh и плохое форматирование. Ценю вашу помощь !!!

Answer 1

Вы можете Pu sh наборов навыков для выбранного пути в массив и получить доступ к ним в файле HTML с помощью индекса.

In .ts File

import { Component } from '@angular/core';
import { FormGroup, FormArray, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  skillSetObj;
  majorPathObj;

  skillForm: FormGroup;
  skillList: FormArray;

  choosenPath;
  skillsForSelectedPath:any = [];  // <--- Declare a new array for the skillsets to be pushed

  constructor(private fb:FormBuilder) {

  }

  ngOnInit() {
    this.skillSetObj = {
      "BackEnd": ["Java8", "Node JS", "Python", "Dotnet"],
      "FrontEnd": ["Javascript ", "Angular ", "React", "Vue"],
      "Database": ["Oracle", "Postgres", "Mysql"]
    };

    this.majorPathObj = ["BackEnd", "FrontEnd", "Database"];

    this.skillForm = this.fb.group({
      skillFormArray: this.fb.array([this.createSkills()])
    });

    this.skillList = this.skillForm.get('skillFormArray') as FormArray;
  }

  createSkills(): FormGroup {
    return this.fb.group({
      majorPath: ['', Validators.compose([Validators.required])],
      skillSet: ['', Validators.compose([Validators.required])]
    });
  }

  getSkillFormGroup(index): FormGroup {
    const formGroup = this.skillList.controls[index] as FormGroup;
    return formGroup;
  }

  get skillFormGroup() {
    return this.skillForm.get('skillFormArray') as FormArray;
  }

  addNewSkill() {
    this.skillList.push(this.createSkills());
  }

  removeSkill(skillRowIndex) {
    this.skillList.removeAt(skillRowIndex);
  }

  prepareSkillSet(event, i) {
    this.skillsForSelectedPath[i]=this.skillSetObj[event.value];  // <--- Push the skills for the selected majorPath into the new array
    const formGroup = this.getSkillFormGroup(i);
    const choosenPath = formGroup.controls['majorPath'].value;
    this.choosenPath = choosenPath;
  }

}

** В HTML файле **

<form [formGroup]="skillForm">

  <div formArrayName="skillFormArray">
      <div *ngFor="let skillArray of skillFormGroup.controls; let i=index">
          <div [formGroupName]="i">
              <div >
                  <mat-form-field appearance="outline">
                      <mat-select formControlName="majorPath"
                          (selectionChange)="prepareSkillSet($event, i)">
                          <mat-option *ngFor="let major of majorPathObj" value={{major}}>
                              {{major}}
                          </mat-option>
                      </mat-select>
                  </mat-form-field>
                  <mat-form-field appearance="outline">
                    <mat-select formControlName="skillSet">
                        <mat-option *ngFor="let skill of skillsForSelectedPath[i]" [value]="skill">   <!-- display the skills for the selected majorPath using the index of the newly created variable -->
                            {{skill}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>
                  <button *ngIf="i===0" mat-fab color="accent" class="add-file-button mt-5"
                      (click)="addNewSkill()" aria-label="Add Skill">
                      <mat-icon>add</mat-icon>
                  </button>
                  <button *ngIf="i!==0" mat-fab color="warn" class="add-file-button"
                      (click)="removeSkill(i)" aria-label="Remove Skill">
                      <mat-icon>remove</mat-icon>
                  </button>
              </div>

          </div>

      </div>
  </div>
</form>

Так что каждый раз, когда majorPath является объектом умений, также обновляется, и вы Можно выбрать соответствующие навыки для вновь выбранного majorPath .

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