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.

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