Get Value From Select Option in Angular 4

Question

How do I get the value from the select option in Angular 4   I want to assign it to a new variable in the component ts file  I ve tried this but outputs nothing   Can you also do it using   ngModel     component html   lt form class  form-inline   ngSubmit   HelloCorp f    f  ngForm  gt        lt div class  select  gt            lt select class  form-control col-lg-8   corporation required gt                lt option  ngFor  let corporation of corporations   value   corporationObj  gt   corporation corp name   lt  option gt                lt  select gt                lt button type  submit  class  btn btn-primary manage  gt Submit lt  button gt        lt  div gt   lt  form gt    component ts  HelloCorp     const corporationObj   corporation value

User · Answer

HTML code        lt form class  form-inline   ngSubmit   HelloCorp modelName   gt           lt div class  select  gt               lt select class  form-control col-lg-8    ngModel    modelName  required gt                   lt option  ngFor  let corporation of corporations   ngValue   corporation  gt                        corporation corp name                    lt  option gt                   lt  select gt               lt button type  submit  class  btn btn-primary manage  gt Submit lt  button gt           lt  div gt        lt  form gt       Component code    HelloCorp corporation        var corporationObj   corporation value

User · Answer

x000D   x000D  export class MyComponent implements OnInit   x000D   x000D    items  any       x000D        id  1  name   one     x000D        id  2  name   two     x000D        id  3  name   three     x000D        id  4  name   four     x000D        id  5  name   five     x000D        id  6  name   six    x000D       x000D    selected  number   1  x000D   x000D    constructor     x000D      x000D     x000D    ngOnInit     x000D      x000D     x000D    selectOption id  number    x000D        getted from event x000D      console log id   x000D        getted from binding x000D      console log this selected  x000D      x000D   x000D    x000D   lt div gt  x000D     lt select  change   selectOption  event target value   x000D      ngModel    selected  gt  x000D     lt option  value   item id   ngFor  let item of items  gt   item name   lt  option gt  x000D      lt  select gt  x000D   lt  div gt   x000D   x000D   x000D

User · Answer

in html file      lt div class  quot row quot  gt                   lt div class  quot col-md-6 quot  gt                       lt div class  quot form-group quot  gt                           lt label for  quot name quot  gt Country lt  label gt                           lt select class  quot form-control quot  formControlName  quot country quot   change   quot onCountryChange  event target value  quot  gt                               lt option disabled selected value  ngValue   quot null quot  gt  -- Select Country  --  lt  option gt                               lt option  ngFor  quot let country of countries quot   value   quot country id quot  gt   country name   lt  option gt                               lt div  ngIf  quot isEdit quot  gt                                   lt option gt  lt  option gt                               lt  div gt                           lt  select gt                         lt  div gt                      lt  div gt               lt  div gt               lt div class  quot help-block quot   ngIf  quot studentForm get  country   invalid  amp  amp  studentForm get  country   touched quot  gt                   lt div  ngIf  quot studentForm get  country   errors required quot  gt  country is required lt  div gt               lt  div gt               lt div class  quot row quot  gt                   lt div class  quot col-md-6 quot  gt                       lt div class  quot form-group quot  gt                           lt label for  quot name quot  gt State lt  label gt                           lt select class  quot form-control quot  formControlName  quot state quot   change   quot onStateChange  event target value  quot  gt                               lt option disabled selected value  ngValue   quot null quot  gt  -- Select State --  lt  option gt                               lt option  ngFor  quot let state of states quot   value   quot state id quot  gt   state state name   lt  option gt                           lt  select gt                         lt  div gt                      lt  div gt               lt  div gt               lt div class  quot help-block quot   ngIf  quot studentForm get  state   invalid  amp  amp  studentForm get  state   touched quot  gt                   lt div  ngIf  quot studentForm get  state   errors required quot  gt  state is enter code hererequired lt  div gt               lt  div gt               lt div class  quot row quot  gt                   lt div class  quot col-md-6 quot  gt                       lt div class  quot form-group quot  gt                           lt label for  quot name quot  gt City lt  label gt                           lt select class  quot form-control quot  formControlName  quot city quot  gt                               lt option disabled selected value  ngValue   quot null quot  gt  -- Select City --  lt  option gt                               lt option  ngFor  quot let city of cities quot   value   quot city id quot   gt   city city name   lt  option gt                           lt  select gt                         lt  div gt                      lt  div gt               lt  div gt               lt div class  quot help-block quot   ngIf  quot studentForm get  city   invalid  amp  amp  studentForm get  city   touched quot  gt                   lt div  ngIf  quot studentForm get  city   errors required quot  gt  city is required lt  div gt               lt  div gt        then in component     onCountryChange countryId number      this studentServive getSelectedState countryId  subscribe resData  gt       this states   resData               onStateChange stateId number       this studentServive getSelectedCity stateId  subscribe resData  gt        this cities   resData               enter code here

User · Answer

This is very simple actually    Please notice that I m   I  adding name  selectedCorp  to your select opening tag  and   II  changing your  value   corporationObj  to  value   corporation   which is consistent with the corporation in your  ngFor  let corporation of corporations  statement     lt form class  form-inline   ngSubmit   HelloCorp f    f  ngForm  gt      lt div class  select  gt        lt select class  form-control col-lg-8   corporation name  selectedCorp  required gt          lt option  ngFor  let corporation of corporations   value   corporation  gt   corporation corp name   lt  option gt        lt  select gt        lt button type  submit  class  btn btn-primary manage  gt Submit lt  button gt      lt  div gt    lt  form gt    And then in your  ts file  you just do the following    HelloCorp form  NgForm       const corporationObj   form value selectedCorp      and the const corporationObj now is the selected corporation object  which will include all the properties of the corporation class you have defined   NOTE   In the html code  by the statement  value   corporation   the corporation  from  ngFor  let corporation of corporations   is bound to  value   and the name property will get the value    Since the name is  selectedCorp   you can get the actual value by getting  form value selectedCorp  in your  ts file   By the way  actually you don t need the   corporation  in your  select  opening tag

User · Answer

You just need to put   ngModel   on your select element    lt select class  form-control col-lg-8   corporation required   ngModel    selectedValue  gt

User · Answer

As a general  see Stackblitz here  https   stackblitz com edit angular-gh2rjx       HTML    lt select   ngModel    selectedOption  gt      lt option  ngFor  let o of options  gt          o name       lt  option gt   lt  select gt   lt button  click   print    gt Click me lt  button gt    lt p gt Selected option     selectedOption    lt  p gt   lt p gt Button output     printedOption    lt  p gt       Typescript   export class AppComponent     selectedOption  string    printedOption  string     options           name   option1   value  1          name   option2   value  2         print         this printedOption   this selectedOption            In your specific case you can use ngModel like this    lt form class  form-inline   ngSubmit   HelloCorp    gt        lt div class  select  gt            lt select   ngModel    corporationObj  class  form-control col-lg-8   corporation required gt                lt option  ngFor  let corporation of corporations  gt  lt  option gt                lt  select gt            lt button type  submit  class  btn btn-primary manage  gt Submit lt  button gt        lt  div gt   lt  form gt   HelloCorp       console log  My input     corporationObj

[angular] Get Value From Select Option in Angular 4

Examples related to angular

Examples related to angular-directive

Examples related to angular4-forms