如何在不弄乱下拉值的情况下使 Angular Reactive Formarray 中的级联下拉菜单工作

Posted 2023-03-13

【中文标题】如何在不弄乱下拉值的情况下使 Angular Reactive Formarray 中的级联下拉菜单工作

【英文标题】：How to make cascading dropdown in a Angular Reactive Formarray work without messing the dropdown value

【发布时间】：2018-09-18 05:26:28

【问题描述】：

我有一个 Angular 4 的表单，其中包含名字 + 姓氏和一个包含 2 个下拉列表（选择）的表单数组，用作级联下拉列表和一个删除按钮。 表单的其余部分还包含一个发送按钮和一个添加选项按钮。我在这里添加了一个屏幕截图，以便您更好地理解。表单添加、删除按钮和发送按钮有效存在 1 个问题，级联下拉菜单仅在有 1 个级联下拉菜单时才有效，当我添加额外的级联时，从前几组级联选择第二个选择中选择值搞砸了。我在这里添加了图片以便更好地解释

正如您在第二张和第三张图片中看到的那样，cascadingdropdown 正在工作 当我在标准中更改选择时，我会在第二个下拉列表中选择正确的选项

在第 4 张图片第 5 张图片和第 6 张图片上，您可以看到添加选项按钮有效，但是当我在选项 2 第一个下拉菜单中选择一个标准时，它与选项 1 2nd Dropwown 混淆了，现在它也包含来自第二个选项的下拉选项

这是我的html代码

<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 i=index "[formGroup]="optionGroup">


      <h4>Option  i + 1  </h4>




     <div>
      <label for = "select-input">Criteria</label>
      <select id="select-input" (change)="onSelectSelect($event.target.value, i)"  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">Option</label>
        <select id="where-input" formControlName ="whereInput">
  
            <option value="0" disabled selected>Select a Option</option>
            <option *ngFor="let where of wheres" value= where.name>where.id</option>


          </select>

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

         


     </div>

    </div>

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

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

   

   </div>

</form>

这是我的组件文件

export class PowComponent 

 selects: Select[];
 wheres: Where[];


 public profileForm : FormGroup;

 public addOptionGroup()

 const fa = this.profileForm.controls["optionGroups"] as FormArray;

  fa.push(this.newOptionGroup());

  

  public removeOptionGroup(index: number)

   const fa = this.profileForm.controls["optionGroups"] as FormArray;

    fa.removeAt(index);

   


   public saveProfileForm()

    console.log(this.profileForm.value);
   



   constructor(public router: Router,  public dropdownqueryservice:    DropDownQueryService , private fb : FormBuilder) 
    this.profileForm = this.fb.group(

        firstNameInput : [ "" ],
        lastNameInput : [ "" ],
        optionGroups : this.fb.array([
            this.fb.group(

              selectInput : [ "" ],
              whereInput : [ "" ],

          ),
       ]),
    );

    this.selects = this.dropdownqueryservice.getSelect();
    this.wheres=[];



onSelectSelect(selectid, i) 
    this.wheres = this.dropdownqueryservice.getWhere().filter((item)=> item.selectid == selectid);

  


 private newOptionGroup() 
  return new FormGroup(

      selectInput: new FormControl(""),
      whereInput: new FormControl(""),

  );
   

  

【问题讨论】：

尝试使用 ngValue 代替 value，参见：***.com/questions/33700266/…

我正在尝试使用 ngValue 但出现更多错误。

您正面临这个问题，因为您只有一个 selects 参数和两个不同的选择值。您必须为每个多选输入处理具有可能选择值的多选数组。

【参考方案1】：

正如我之前在评论中提到的，问题来自于多个选择表单的唯一 selects 数组。

您必须创建一个 Select 数组数组，其中包含每个选择值的可能条件数组。

Here is a stackblitz solution suggestion，我做了一些修改以使其保持简单并使其正常工作。如果您想更明确地表达您的担忧，请随时 fork 和编辑。

【讨论】：

嗨，我很忙，我看到了你的代码，但由于我的代码有一个数组，我可能不得不弄清楚如何做到这一点，因为赏金即将到期，我要给你。今天晚些时候或明天，我将分叉您的代码并将其发布在这里我已经完成了一半。谢谢

我试过你的代码，但我认为因为我使用的是对象数组，所以这里不同的是我的代码stackblitz.com/edit/***-49722349-6pvgkh

这里是您的 stackblitz 的固定版本以及建议的解决方案：stackblitz.com/edit/***-49722349-2

感谢您的示例解决方案！我遇到的一个问题是，当您更改第一个下拉列表时 - 第二个下拉列表保留旧值，该值不再有效。清除第二个投递箱的最佳方法是什么？就我而言 - 我使用逐步过滤的级联下拉菜单。所以 - 如果旧值仍然有效 - 保留它，如果不是 - 清除它。

@NickGoloborodko 这是一个有趣的评论，没有注意到。我还不知道如何正确处理它，请您为此问题创建一个新问题吗？