ngModel return undefined in angular

Question

I have two drop down in html. First dropdown is giving the selected value but the second dropdown is return as undefined.

component.html

<form class="form row">
<div class="inputGroup inputGroup--medium">
        <label class="inputGroup__label is-required">Product</label>
        <div class="selectWrapper">
          <select id="selectProduct"  class="inputGroup__select" [(ngModel)]="selectedProduct"
            (ngModelChange)="setProductVersion($event)"[ngModelOptions]="{standalone: true}">
            <option selected value="" disabled>Select Product</option>
            <option *ngFor="let product of Products" [value]="product.name">
              {{ product.name}}
            </option>
          </select>
        </div>
      </div>
 <div class="inputGroup inputGroup--medium">
        <label class="inputGroup__label is-required">Product Version</label>
        <div class="selectWrapper">
          <select id="selectProductVersion" class="inputGroup__select"           
          [(ngModel)]="selectedProductVersion" [ngModelOptions]="{standalone: true}">
          <option selected value="" disabled>Select Product Version</option>
            <option *ngFor="let pVersion of ProductsVersion" [value]="pVersion.name">
              {{ pVersion.productVersion}}
            </option>
          </select>
        </div>
      </div>
</form>

component.ts

 selectedProduct:any;
    selectedProductVersion:any;

 setProductVersion(event){
  const filteredResult = this.AllProductsVersion.filter(x=> x.productName ==this.selectedProduct);
  this.ProductsVersion=filteredResult;
 }

this.AllProductsVersion is Json data. and i'm able to set the product version based on selected product using this function.

selectedProduct is giving the result whatever is selected in dropdown but selectedProductVersion is giving as undefined.

What exactly you want to do?? like what is the functionality of this? — Purvang Gor
– Purvang Gor, Commented May 24, 2021 at 7:35
i have to post the selectedProduct and selectedProductVesion to the API. hence selected values are required. — New Developer
– New Developer, Commented May 24, 2021 at 7:37
So is second dropdowns' values are based on the selected value of first dropdown? — Purvang Gor
– Purvang Gor, Commented May 24, 2021 at 7:39
yes. second dropdown values are based on first dropdown. so i'm calling the (ngModelChange)="setProductVersion($event)" to set the values in second dropdown. — New Developer
– New Developer, Commented May 24, 2021 at 7:41

Purvang Gor · Accepted Answer · 2021-05-24 12:34:17Z

1

try changing this:

 <option selected value="" disabled>Select Product Version</option>
            <option *ngFor="let pVersion of ProductsVersion" [value]="pVersion.productVersion">
              {{ pVersion.productVersion}}
            </option>

edited May 24, 2021 at 12:34

answered May 24, 2021 at 7:49

Purvang Gor

1184 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

New Developer Over a year ago

i'm using the correct variable.this.ProductsVersion will return the filteredResult which i'm iterating in html ngFor loop.

Purvang Gor Over a year ago

Okk so when would be the data comes in selectedProductVersion variable.?

New Developer Over a year ago

when the second dropdata data is selected [(ngModel)]="selectedProductVersion" this should save the selection and assign it to selectedProductVersion variable. however for firstdrop down it's working fine.

Purvang Gor Over a year ago

Okk, will you be able to show data in second dropdown list for selection?

New Developer Over a year ago

yes. in second dropdown data is coming based on first dropdown selection. but i'm not able to get the selected data from second drop down to selectedProductVersion variable

|

Collectives™ on Stack Overflow

ngModel return undefined in angular

1 Answer 1

15 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

15 Comments

Your Answer

Sign up or log in

Post as a guest

Related