如何使 Angular Reactive Formarray 中的级联下拉列表工作而不会弄乱下拉列表值
How to make cascading dropdown in a Angular Reactive Formarray work without messing the dropdown value
我在 angular 4 中有一个表单,其中包含名字 + 姓氏和一个包含 2 个下拉列表 (select) 的表单数组,用作级联下拉列表和一个删除按钮。
表单的其余部分还包含一个发送按钮和一个添加选项按钮。我在此处添加了屏幕截图,以便您更好地理解。表单添加、删除按钮和发送按钮工作有 1 个问题级联下拉列表仅在有 1 个级联下拉列表时工作,当我添加额外的级联 select 前一组级联的值 select 秒select 搞砸了。我在这里添加了图片以获得更好的解释
正如您在第二张和第三张图片中看到的那样,级联下拉菜单正在运行
当我在 Criteria 中更改 select 时,我在第二个下拉列表中将正确的选项设置为 select
在第 4 张图片、第 5 张图片和第 6 张图片上,您可以看到添加选项按钮有效,但是当我 select 选项 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(""),
});
}
}
正如我之前在评论中提到的,问题来自多个 select 表单的唯一 selects
数组。
您必须创建一个 Select
数组的数组,其中包含每个 select 值的可能条件数组。
Here is a stackblitz solution suggestion,我做了一些修改以保持简单并使其正常工作。如果您想更明确地表达您的担忧,请随时进行分叉和编辑。
我在 angular 4 中有一个表单,其中包含名字 + 姓氏和一个包含 2 个下拉列表 (select) 的表单数组,用作级联下拉列表和一个删除按钮。 表单的其余部分还包含一个发送按钮和一个添加选项按钮。我在此处添加了屏幕截图,以便您更好地理解。表单添加、删除按钮和发送按钮工作有 1 个问题级联下拉列表仅在有 1 个级联下拉列表时工作,当我添加额外的级联 select 前一组级联的值 select 秒select 搞砸了。我在这里添加了图片以获得更好的解释
正如您在第二张和第三张图片中看到的那样,级联下拉菜单正在运行
当我在 Criteria 中更改 select 时,我在第二个下拉列表中将正确的选项设置为 select
在第 4 张图片、第 5 张图片和第 6 张图片上,您可以看到添加选项按钮有效,但是当我 select 选项 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(""),
});
}
}
正如我之前在评论中提到的,问题来自多个 select 表单的唯一 selects
数组。
您必须创建一个 Select
数组的数组,其中包含每个 select 值的可能条件数组。
Here is a stackblitz solution suggestion,我做了一些修改以保持简单并使其正常工作。如果您想更明确地表达您的担忧,请随时进行分叉和编辑。