New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.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
<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();
} |