Javascript 从submit angular 6获取HTML选择值和输入值

从表单提交中获取HTML选择值和输入值

在这里，我只得到了select值的undefined，并给出了错误

无法读取未定义的属性“target” 在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>

---

我会用这种方式创建组件，我不知道如何创建plunker/fiddler，但双向绑定现在对您有效。我是这样创造的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>

---

你应该写

（点击）=“formSubmit（$e）

@fatemefazli仍然得到这两个错误：/在你的formSubmit中记录e并尝试进行stackblitz？@fatemefazli这是代码的一小部分，实际的部分有点大：/

<!--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>

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

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