I am currently working on a web service that allows me to post data in order to create profiles. I have encountered an issue with a drop-down list in the form where the selected option value does not get posted. This results in an 'undefined' error. The backend team mentioned that the problem might be on my end, specifically with binding the correct data within the JSON array.
I am looking for guidance on the proper way to post the option value and how to handle posting multiple options in a multi-select drop-down menu. Below is the HTML code for my component:
<div class="row col-md-12" style="margin-bottom: 15px; text-align:
center">
<select name="country" class="rounded-inputs20 select-
select col-md-3" (change)="onChangeCountry($event.target.value)">
<option *ngFor="let country of countries"
[value]="country.id">{{country.name}}</option>
</select>
<select name="city" class="rounded-inputs20 select-select
col-md-3" (change)="onChangeCity($event.target.value)">
<option *ngFor="let city of cities" [value]="city.id">
{{city.name}}</option>
</select>
<select name="districts" class="rounded-inputs20 select-
select col-md-3">
<option *ngFor="let district of districts"
[value]="district.id">{{district.name}}</option>
</select>
</div>
Here is the TypeScript code for my component:
// TypeScript code here
Additionally, I have tested the web service API on Postman with a number (1) and received a status code of 200, suggesting that the issue lies within the input values being read incorrectly in the HTML. If further information is required or if anything is unclear, please feel free to comment and I will provide all the necessary data. I am particularly interested in understanding what might be wrong with the 'district_id' part. You are welcome to try the API on Postman for yourself.