locked
How to assign and make default selection of Drop down (select) control in edit form of Angular 2 application RRS feed

  • Question

  • User-1202100973 posted

    Hi Every one,

    I have drop down in Edit page of Angular 2 App.

    when we navigate to edit page. All the text boxes I am filling the data getting the data from back end to Component.

    using the 2 way binding I am binding to the text box. But have a problem with the dropdown

    I am getting the value from back end to component. But how can i assign the value to the drop down.  And all the rest of the values to the drop down.

    Here is my code.

    <select class="form-control" name="TechnologyFamily" [(ngModel)]="TechnologyFamily1">
           <option *ngFor="let tecfamily of TechFamily">
                           {{tecfamily}}
    </option>
    </select>

    Any help is appreciated.

    Thanks 

    Venkat

    Sunday, October 22, 2017 8:11 PM

Answers

  • User1771544211 posted

    Hi Aditya_ven,

    You can set the [(ngModel)] to the option's value that you want to set it as selected. And remember to set the value attribute inside the <option> tag.

    So it should looks like:

    <select [(ngModel)]="selectedCountry.id" (input)="onInput($event)">
      <option *ngFor="#country of countries" value= {{country.id}}>{{country.name}}</option>
    </select>

    Here is an example about how to set the selected value for the dropdown in Angular 2, please take it as reference.

    https://embed.plnkr.co/plunk/5TUiaX

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 23, 2017 2:10 AM

All replies

  • User1771544211 posted

    Hi Aditya_ven,

    You can set the [(ngModel)] to the option's value that you want to set it as selected. And remember to set the value attribute inside the <option> tag.

    So it should looks like:

    <select [(ngModel)]="selectedCountry.id" (input)="onInput($event)">
      <option *ngFor="#country of countries" value= {{country.id}}>{{country.name}}</option>
    </select>

    Here is an example about how to set the selected value for the dropdown in Angular 2, please take it as reference.

    https://embed.plnkr.co/plunk/5TUiaX

    Best Regards,

    Jean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, October 23, 2017 2:10 AM
  • User-1202100973 posted

    Hi Jean sun,

    Thank you for ur reply. But I don't have any id associated with the country.

    Here is the scenario. we have list of countries. A customer can submit which country he belongs to.

    And I am saving the data. The same data can be edited in future. So I have an edit screen where we have the list of countries available in drop down.

    when ever we go to edit screen its should show the previously selected country as  default.

    But the list of all the countries also need to be available in case if the customer want to change it.

    can any one help with this scenario.

    Tuesday, October 24, 2017 3:33 AM
  • User1771544211 posted

    Hi Aditya_ven,

    Thank you for ur reply. But I don't have any id associated with the country.

    That's the code the shows how to use the [(ngModel)] to set the selected option of the dropdown list. Not the code that can be applied with your situation.

    Here is the scenario. we have list of countries. A customer can submit which country he belongs to.

    Please check the link in my previous post, it shows how to bind the dropdown list and set the selected value. Please check the demo and apply it into your application.

    Best Regards,

    Jean

    Tuesday, October 24, 2017 6:25 AM