I have cascading dropdown list which works alone, but when I generate a new row and change one of my dropdowns its affects my entire dropdown list.
Here is my html code.
<td>
<select class="form-control" formControlName="province_id"
(change)="onChangeProvince($event)">
<option >Select Province</option>
<option *ngFor="let province of provinces; let i = index"
[value]="province.id">{{province.province_name}}</option>
</select>
</td>
<td>
<select class="form-control" formControlName="district_id">
<option >Select District</option>
<option *ngFor="let district of districts" [value]="district.id">
{{district.district_name}}</option>
</select>
</td>
<td>
<button class="btn btn-danger" type="button"
(click)="deleteMyRelation(i)">Delete</button>
<button class="btn btn-primary" type="button"
(click)="addItem()">Add</button>
</td>
Here is my component code.
createItem(): FormGroup {
return this.fb.group({
province_id: '',
district_id: ''
});
}
addItem(): void {
this.itemRows = this.contactForm.get('itemRows') as FormArray;
this.itemRows.push(this.createItem());
}
ngOnInit() {
this.contactForm = this.fb.group({
province_id: '',
district_id: '',
itemRows: this.fb.array([ this.createItem() ])
});
this.getProvinces();
}
provinces = <any>[];
districts = <any>[];
getProvinces(){
this.contactService.getProvinces().subscribe(
data => {
this.provinces = data;
console.log(data);
},
error => {
console.log(error);
});
}
onChangeProvince(event:any){
this.contactService.getDistrict(event.target.value).subscribe(
data => {
this.districts = data;
},
error => {
console.log(error);
});
}