问题描述
我有一个 angular 4 的表单，其中包含名字 + 姓氏，以及一个包含 2 个下拉列表(选择)的表单数组，用作级联下拉列表和一个删除按钮.表单的其余部分还包含一个发送按钮和一个添加选项按钮.我在这里添加了一个屏幕截图，以便您更好地理解.表单添加、删除按钮和发送按钮工作有 1 个问题，级联下拉列表仅在有 1 个级联下拉列表时才起作用，当我添加额外的级联时，从前几组级联选择第二个选择中选择值搞砸了.我在这里添加了图片以便更好地解释
正如您在第二张和第三张图片中看到的，cascadingdropdown 正在运行当我在 Criteria 中更改选择时，我在第二个下拉列表中找到了要选择的正确选项
在第 4 张图片、第 5 张图片和第 6 张图片上，您可以看到添加选项按钮有效，但是当我在选项 2 的第一个下拉列表中选择一个条件时，它与选项 1 2nd Dropwown 混淆，现在它也包含来自第二个选项的下拉选项
这是我的html代码
这是我的组件文件
导出类 PowComponent {选择:选择[]；哪里:哪里[];public profileForm : FormGroup;公共添加选项组(){const fa = this.profileForm.controls["optionGroups"] 作为 FormArray;fa.push(this.newOptionGroup());}公共 removeOptionGroup(索引:数字){const fa = this.profileForm.controls["optionGroups"] 作为 FormArray;fa.removeAt(index);}公共 saveProfileForm(){console.log(this.profileForm.value);}构造函数(公共路由器:路由器，公共 dropdownqueryservice:DropDownQueryService，私有 fb:FormBuilder){this.profileForm = this.fb.group({firstNameInput : [ "" ],lastNameInput : [ "" ],选项组:this.fb.array([这个.fb.group({选择输入 : [ "" ],其中输入:["]，}),]),});this.selects = this.dropdownqueryservice.getSelect();this.wheres=[];}onSelectSelect(selectid, i) {this.wheres = this.dropdownqueryservice.getWhere().filter((item)=> item.selectid == selectid);}私人 newOptionGroup() {返回新的表单组({selectInput: new FormControl(""),whereInput: new FormControl(""),});}}正如我之前在评论中提到的，问题来自用于多个选择表单的唯一 selects 数组.
您必须创建一个 Select 数组，其中包含每个选择值的可能条件数组.
这是一个 stackblitz 解决方案建议，我做了一些修改以保持简单并使这行得通.如果您想更明确地表达您的担忧，请随时进行分叉和编辑.
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 workingWhen I change select in Criteria I fet the right options to select in the 2nd dropdown
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
Here is my html code
<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>And here is my component file
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(""),
});
}
}
As I mentionned previously on the comment, the issue is comming from the unique selects array for multiple select forms.
You will have to create an array of arrays of Select, that contains an array of possible criteria for each select value.
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 中的级联下拉列表工作而不会弄乱下拉值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！