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
