I am currently working on a feature that populates the city based on a zip code input. I have successfully achieved this functionality using normal HTML tags with the (keyup) event binding. However, when trying to implement it using CSS, I had to use (keyup.enter), which does trigger the assigned function but causes issues with the patchValue() function. Here is a snippet of my code:
editor.component.ts
profileForm = this.fb.group({
name: ['', Validators.required],
address: this.fb.group({
zip: ['', Validators.required],
city: ['', Validators.required]})
});
func(event: any){
this.profileForm.patchValue({
address:{
city: this.getCity(event.value)
}
})
}
getCity = (theCurrentZip: any) => {
return Object.keys(this.zipCode).filter(z => {
return this.zipCode[z].includes(theCurrentZip)
})[0]
}
zipCode: any = {
"A": ["1", "2"],
"B":["3", "4"]
};
editor.component.html
<div>
<form (ngSubmit)="onSubmit()" #myForm="ngForm" class="profileForm">
<mat-form-field required>
<input matInput id="name" placeholder="Contact Name" name="name" [(ngModel)]="name">
</mat-form-field >
<div formGroupName="address">
<mat-form-field>
<input matInput id="zip" (keyup)="func($event.target)" placeholder="Zip" name="zip" [(ngModel)]="zip">
</mat-form-field>
<mat-form-field required>
<input matInput id="city" placeholder="City" name="city" [(ngModel)]="city">
</mat-form-field>
</div>
<p>
<button type="submit" mat-raised-button color = "primary">Submit</button>
</p>
</form>
</div>