使用 Angular 6+ 表单数组复制动态选择框

Question

选择框 1 是“路径”。 选择框 2 是“SkillSet”。

我正在尝试根据单击按钮复制一组选择框（路径和技能集）。因此，当我单击添加按钮时，选择框（路径和技能集）表单元素将被复制。这里要注意的是选择框“Skillset”元素的选项是动态的，因为它取决于选择框“Path”。

问题如下： Step1：选择 Path 作为 BackEnd，Skill 将根据 Path 进行填充。在第二个选择框中选为Java8。

Step2：点击添加按钮，选择框路径和技能被复制。现在选择选择框路径作为前端。

Step3：在第二行选择Path作为FrontEnd后，第一行选择的Skill清空。 （在图片中我添加了两个路径）

问题的 StackBlitz 演示： https://stackblitz.com/edit/angular-duplicate-dynamic-select-box?file=null

期望是：我必须选择每个路径和相应的技能。比如如果我选择了 3 个不同的路径，那么我必须在 3 个不同的选择框中选择 3 个不同的技能。

我尝试了很多解决方案。什么都没有解决。在这种情况下有人可以帮忙吗？

对不起，我的英语和格式不正确。感谢您的帮助！！！

Answer 1

您可以将所选路径的技能集推送到数组中，并使用索引在 HTML 文件中访问它们。

在 .ts 文件中

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选择对应的技能。

输出如下所示