如何使Angular Reactive Formarray中的级联下拉菜单工作而不会弄乱下拉菜单值 [英] How to make cascading dropdown in a Angular Reactive Formarray work without messing the dropdown value

问题描述

我有一个角4的表单，其中包含名字+姓氏，以及一个包含2个dropdown(select)的formarray，它们分别用作级联下拉菜单和一个删除按钮. 表单的其余部分还包含一个发送按钮和一个添加选项按钮.我在此处添加了屏幕截图，供您更好地了解.表单的add，remove按钮和send按钮起作用，只有在有1个级联下拉菜单时，级联下拉菜单才起作用.当我添加一个额外的级联时，请从前一组级联选择第二个选择中弄乱值.我在这里添加了图片，以更好地植入

I have a form in angular 4 that containing First Name + Last Name and a formarray containing 2 dropdown(select) working as cascading dropdown and a delete button. The rest of the form also contains a send button and a add option button. I added a screenshot down here for you to understand better. The forms add , remove button and send button works there is 1 problem the cascading dropdown works only when there is 1 cascading dropdown ,when I add an extra cascading select the value from previous groups of cascading select second select get messed up. I added pics down here for a better explantion

如您在第二张和第三张图片上所见，级联下拉列表正在工作 当我更改条件中的选择时，我会在第二个下拉菜单中选择正确的选项

As you can see on the 2nd and the 3rd picture the cascadingdropdown is working When I change select in Criteria I fet the right options to select in the 2nd dropdown

在第4张图片，第5张Ppicture和第6张图片上，您可以看到添加选项"按钮起作用，但是当我在选项2的第一个下拉菜单中选择一个条件时，它与选项1的第2个Dropwown混为一谈，现在它还包含第2个选项的下拉选项

On the 4th picture 5th Ppicture and 6th Picture you can see the add options button works but when I select a Criteria in Option 2 first dropdown it messed up with Option 1 2nd Dropwown also now it contains the dropdown choices from the 2nd Option

这是我的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(""),

  });
   }

  }

推荐答案

正如我之前在评论中提到的那样，问题出在多个选择表单的唯一selects数组中.

As I mentionned previously on the comment, the issue is comming from the unique selects array for multiple select forms.

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

You will have to create an array of arrays of Select, that contains an array of possible criteria for each select value.

这是一个关于stackblitz解决方案的建议，我做了一些修改以使其简单易行这行得通.如果您想更明确地表达自己的担忧，请随意编辑.

Here is a stackblitz solution suggestion, I did some modification to keep it simple and to make it work. Feel free to fork and edit if you want to get more explicit about your concern.

这篇关于如何使Angular Reactive Formarray中的级联下拉菜单工作而不会弄乱下拉菜单值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！