I am trying to take zip code in input from user and trigger the on key up event which will populate the stores / cities available in that area, below is a code snippet for the same..
delivery.component.ts
zip: any = {
"10020": ["A", "B" ],
"20050":[ "X", "Y" ]
};
getCity = (theCurrentZip: any) => {
let key = Object.keys(this.zip).filter(z => {
return z.includes(theCurrentZip)
}).values();
console.log("here",key);
}
onKeyUp(event: any){
this.deliveryForm.patchValue({
city: this.getCity2(event.target.value)
})
}
delivery.component.html
<form [formGroup]="deliveryForm" >
<div style="margin: 0 auto;text-align: left;">
<div>
<label>Zipcode:</label>
<div><input id="zip" type="text" formControlName="zip" (keyup)="onKeyUp($event)"/></div>
</div>
<div>
<label>City:</label>
<input id="city" type="text" formControlName="city">
</div>
</div>
</form>
getCity = (theCurrentZip: any) => {
return this.zip[theCurrentZip];
}
If I didn't miss anything important it should do the work.