2 how to handle change event for multiple cascaded country-state-city dependent drop down in angular 7. i am interested to save multiple addresses for user where the design goes like below.

[Santosh]

below is my typescript file. it has this.states property which is used to populate states by using let state of states(*ngFor). i want to handle on this.states differently for different formGroupArray elements as shown i am replicating country state city on click function addButtonClick().

please help me handle country state city change dynamically as i am clicking on add more button(which adds other group below) and my country change should effect respective state of same group

export class ContactComponent implements OnInit {

public contactForm: FormGroup;
employees: any = [];
countries: any = [];
states: any = [];

constructor(private fb: FormBuilder, private employeeService: EmployeeService, private generalService: GeneralService) { }

ngOnInit() {
    this.onInIt();
}

onInIt(){
    this.contactForm = this.fb.group({  
        employee_name: ['', Validators.required],  
        addressGroup: this.fb.array([this.addMoreGroup()])  
    }); 
    this.employeeService.getEmployees().subscribe((response: Response)=>{
        this.employees = response.statusText;
    });
    this.generalService.getCountries().subscribe((response: Response)=>{
        this.countries = response.statusText;
    });
}

SaveContact(){
    this.employeeService.saveEmployeeContactDetails(this.contactForm.value).subscribe((response: Response)=>{
        console.log(response)
    });
}

get f() { return this.contactForm.controls; }

addMoreGroup(): FormGroup {  
  return this.fb.group({  
        address_line_1: ['', Validators.required],  
        country : ['', Validators.required],  
        state: ['', Validators.required],
        city: ['', Validators.required],  
        pincode : ['', Validators.required]  
  });  
}  


getStates(country: number){
    this.generalService.getStates(country).subscribe((response: Response)=>{
        this.states = response.statusText;
    });
}

addButtonClick(): void {  
    (<FormArray>this.contactForm.get('addressGroup')).push(this.addMoreGroup());  
} 

removeButtonClick(i: number): void {  
    console.log(i);
    (<FormArray>this.contactForm.get('addressGroup')).removeAt(i);  
} 

}

Please refer for image or how design looks likes

https://i.stack.imgur.com/KrsYG.png

[Prince Oliver]

Hello Santosh, 

Greetings from Syncfusion support. 

You can handle change event for multiple dynamically created dropdowns by passing the component instance in change event argument from the DropDownList element. Kindly refer to the following code snippet. 

<div class="row" *ngFor="let add of addItems" style="margin-top: 10px"> 

    <div class="col-sm-4"> 

        <ejs-dropdownlist #countryList id="country_{{add}}" [dataSource]='country' [fields]='countryFields' 

            (change)='onChange1($event, countryList, stateList)' popupHeight='auto' [placeholder]='countryWaterMark'> 

        </ejs-dropdownlist> 

    </div> 

    <div class="col-sm-4"> 

        <ejs-dropdownlist #stateList id='state_{{add}}' [dataSource]='state' [fields]='stateFields' 

            [placeholder]='stateWaterMark' popupHeight='auto'></ejs-dropdownlist> 

    </div> 

    <div class="col-sm-4"><input placeholder="city" class='e-input'></div> 

</div> 

public onChange1(e, countyObj, stateObj): void { 

    // query the data source based on country DropDownList selected value 

    let tempQuery: Query = new Query().where('CountryId', 'equal', countyObj.value); 

    stateObj.query = tempQuery; 

    // clear the existing selection. 

    stateObj.text = null; 

    // bind the property changes to state DropDownList 

    stateObj.dataBind(); 

} 

We have attached a sample for your reference, please find it in the following location 

Sample Link: https://stackblitz.com/edit/angular-bhbbcr-sxyrfv  

Let us know if you need any further assistance on this. 

Regards, 

Prince