CODEWITHSUNDEEP
javascriptangulartypescriptangular8
void
void

Reputation: 913

Angular 8 Select Option property binding

I have a Select Option Like This .. In this dropdown i am calling an api just to get some data

<div class="mb-frm_l frm_r">
            <div class="dropdown inputs">
              <select
                [ngClass]="{
                  error:
                    billingForm.controls.selectDistrict.errors?.required &&
                    ((billingForm.controls['selectDistrict'].dirty &&
                      billingForm.controls['selectDistrict'].touched) ||
                      billingForm.controls['selectDistrict'].errors
                        .isValidString)
                }"
                formControlName="selectDistrict"
                id="selectDistrict"
                (focus)="onFocus()"
                (blur)="onBlur()"
                (change)="getCityList($event.target.value)" // here i want to pass the District name
              >
                <option value="">Select District</option>
                <option
                  *ngFor="let district of districtList"
                  [attr.district-id]="district.district_id"
                  [value]="district.district_id"
                >
                  {{ district.district }}
                </option>
              </select>
              <div
                *ngIf="
                  billingForm.controls['selectDistrict'].invalid &&
                  billingForm.controls['selectDistrict'].dirty &&
                  billingForm.controls['selectDistrict'].touched
                "
                class="error_txt"
              >
                Please select state
              </div>
            </div>
          </div>

Here I am passing the selected value in getCityList($event.target.value)

As i want the district.district also in my ts file

My Question is How can i pass the district.district here with the value also ???

Thanks!

Upvotes: 0

Views: 841

Answers (2)

Hansaka Sandaruwan
Hansaka Sandaruwan

Reputation: 521

  • Change your Option tag this [value]="district.district_id" into [value]="district"
  • Then your (change)="getCityList($event.target.value)" will return selected district object. then you can access any property you want

Upvotes: 0

ukn
ukn

Reputation: 1803

A simple find in getCityList is what you need. Since you didnt provide the code, I made up something:

getCityList($event.target.value): void {
    const value = '';
    const district = this.districtList.find((d) => d.district_id === $event.target.value);
    if (district) {
        value = district.district;
    }
}

Upvotes: 1

Related Questions