У меня есть форма в angular 4, содержащая имя + фамилия и массив форм, содержащий 2 раскрывающихся списка (выберите), работающих как каскадный раскрывающийся список, и кнопку удаления. Остальная часть формы также содержит кнопку отправки и кнопку опции добавления. Я добавил сюда скриншот, чтобы вы могли лучше понять. Формы добавляют, удаляют кнопку и кнопку отправки, есть 1 проблема: каскадный раскрывающийся список работает только тогда, когда есть 1 каскадный раскрывающийся список, когда я добавляю дополнительный каскадный выбор значения из предыдущих групп каскадного выбора, второй выбор сбивается. Я добавил картинки сюда для лучшего объяснения
Как вы можете видеть на 2-м и 3-м изображениях, каскадное раскрывающееся меню работает. Когда я меняю выбор в Criteria, я выбираю правильные параметры для выбора во 2-м раскрывающемся списке
На 4-м изображении 5-е изображение и 6-е изображение вы можете видеть, что кнопка добавления параметров работает, но когда я выбираю Критерии в первом раскрывающемся списке Вариант 2, он перепутался с Вариантом 1 2-й раскрывающийся список, также теперь он содержит раскрывающиеся варианты из 2-го варианта
Вот мой 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
и два разных значения выбора. Вы должны обрабатывать несколько массивов выбора с возможными значениями выбора для каждого ввода нескольких вариантов. - person ibenjelloun   schedule 13.04.2018