Getting a HTML select value and and input value from submit angular 6

Question

Getting a HTML select value and and input value from form submit ,

in here i get only undefined for the select value, and gives error on

Cannot read property 'target' of undefined at RightcomponentComponent.push../src/app/rightcomponent/rightcomponent.component.ts.RightcomponentComponent.formSubmit

rightcomponent.component.html

  <!--Form start-->
  <form >
  <div class="row">

      <div class="form-group row">
          <div  style="margin-left: 60px;margin-right:50px ">
              <select class="form-control"  (ngModelChange)="onSelected($event)"  id="sel1">
                  <option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
                </select>
          </div>  
        </div>

  </div>

 <div class="row">
     <div class="container set_buttons_div" >
           <div class="form-group row">
             <div class="col-xs-2">
               <input class="form-control" id="ex1" type="text">
               <br>
             </div>  
           </div>
       </div>
 </div>
 <br>
 <div class="row">
         <a  class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit(e)">
                 <i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
                 Buy
               </a>
 </div>
 <br>

   </form>

rightcomponent.component.ts

formSubmit(e){

     var stock = this.onSelected(e);
     console.log(stock);
      var quantity =  e.target.elements[0].value;
     console.log(quantity);
   }


  onSelected(e){
    var stock_company_name = e;
return stock_company_name;
  }

Answer 1

I would have created component in this way, i dont know how to create a plunker / fiddler, but two way binding will work for you now. I created this way. :D

<!--Form start-->
  <form #myForm="ngForm" novalidate>
  <div class="row">

      <div class="form-group row">
          <div  style="margin-left: 60px;margin-right:50px ">
          <select class="form-control"  (change)="onSelected($event)" id="sel1" name="stock" [(ngModel)]="Model.stockname">
              <option *ngFor="let stock_name of stock_names" [value]="stock_name.stockName">{{stock_name.stockName}}</option>
          </select>
          </div>  
        </div>

  </div>

 <div class="row">
     <div class="container set_buttons_div" >
           <div class="form-group row">
             <div class="col-xs-2">
               <input class="form-control" id="ex1" type="text" name="companyName" [(ngModel)]="Model.companyname">
               <br>
             </div>  
           </div>
       </div>
 </div>
 <br>
 <div class="row">
    <a  class="btn btn-sq-lg btn-success b_s_buttons" (click)="formSubmit()">
     <i class="glyphicon glyphicon-thumbs-up fa-5x"></i><br/>
     Buy
   </a>
 </div>
 <br>
</form>

rightcomponent.component.ts

// create an Object model with  form fields as key
Model = {
    stockname: '',
    companyname: ''
}

formSubmit(){
    console.log(this.Model);
   }