CODEWITHSUNDEEP
angulartypescriptdata-bindingangular4-httpclient
Mohamed Wahshey
Mohamed Wahshey

Reputation: 422

how to append select tag option value to a web service angular 4

I have a web service to post it some data to create profile,

so I have a drop-down list of the form

when I try to post the data from everything on the form it works fine

but the option value from the selected option in a drop-down menu doesn't post

it gives me 'undefined' error

I asked the backend team and they told me it's something on my end that I'm not binding the right data inside the JSON array

I need to know what is the right way to post option value

and if I selected more than one option inside the drop down, like multi select drop down, how to post all of the options inside the array?

here is my component html:

<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>

My component ts:

name: any[];
logo: any[];
vision: any[];
mission: any[];
address: any[];
emails: any[] = [];
numbers: any[] = [];
school_id: any[];
district_id: any[];
// latitude: any[];
// longitude: any[];
numbertitle: number;
number: number;
private url = 
'https://crm.easyschools.org/api/en/schools/create/create';
 countries: any[] = []; 
 cities: any[] = []; 
 districts: any[] = []; 
imageFile: any;
schoolyears: any[] = [];
start_date: string;
end_date: string;
name_en: any[] = [];
id: number[] = [];
type: any[] = [];


onChangeCountry(countryId: number) {
this.cities = this.countries.filter(x => x.id == countryId)[0].cities;
this.districts = this.cities.filter(x => x.id == this.cities[0].id)
[0].districts;
 }

onChangeCity(cityId: number) {
this.districts = this.cities.filter(x => x.id == cityId)[0].districts;
 }


private getMyBlog() {
return this._http.get('http://crm.easyschools.org/api/en/regions')
// .map((res) => res.json())
  .subscribe(countries => {
    this.countries = countries.data;
    console.log(countries);
    this.cities = this.countries.filter(x => x.id === 1)[0].cities;
    this.districts = this.cities.filter(x => x.id === 1)[0].districts;
  });
 }
 getFile(event){
 this.imageFile =  event.target.files[0];
 }
 onSubmit(form: NgForm) {
 var data = form.value;
 let formData: FormData = new FormData();
 // debugger;

 formData.append('logo', this.imageFile, this.imageFile.name);
 formData.append('name', data.name1);
 formData.append('vision', data.vision);
 formData.append('mission', data.mission);
 formData.append('address', data.address);
 formData.append('latitude', 1);
 formData.append('longitude', 1);
 formData.append('district_id', data.districts);
 formData.append('emails[0][title]', data.title);
 formData.append('emails[0][email]', data.email);
 formData.append('numbers[0][title]', data.numbertitle);
 formData.append('numbers[0][number]', data.number);
 formData.append('schoolyears[0][start_date]', data.start_date);
 formData.append('schoolyears[0][end_date]', data.end_date );
 formData.append( 'schooltypes[0][type_id]', 1 );

 this._http.post(this.url, formData)
  .subscribe(response => {
    // debugger;
    console.log(response);
  }, (err: HttpErrorResponse) => {
    console.log(err);
  });

 }

when I try the web service API on postman and give it a number (1) it gives me scode 200, the issue is with the input inside the HTML to read the value correctly

If anything is missing or you need more details, just comment and I will give you all the data you need, I need to know what is wrong with the district_id part

feel free to try the API on the postman

Upvotes: 0

Views: 2651

Answers (2)

Nikola Gavric
Nikola Gavric

Reputation: 3543

Solution 1 (multiple values)

component.ts

district_id: number[] = [];
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

component.html

...
<select multiple [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [value]="district.id">{{district.name}}</option>
</select>
...

Solution 2:

component.ts

district_id: number;
...
...
...
onSubmit(form: NgForm) {
    ...
    `formData.append('district_id', this.district_id);`
    ...
}

component.html

...
<select [(ngModel)]="district_id" name="districts" class="rounded-inputs20 select-select col-md-3">
        <option *ngFor="let district of districts" [ngValue]="district.id">{{district.name}}</option>
</select>
...

Upvotes: 3

Krishna Mohan
Krishna Mohan

Reputation: 1732

You can update the change callback as follows:

onChangeCity($event.target.options[$event.target.selectedIndex].value)

Upvotes: 0

Related Questions