forms - Angular 2 : How to get the selected value from different options of a form?

标签 forms html-select angular angular-ngmodel angular2-forms

我想使用 <select>以一种让用户能够更新不同 <option> 之间的值的形式.我在这里使用了指南中的技术:https://angular.io/docs/ts/latest/guide/forms.html .这是我正在谈论的示例:

<div class="form-group">
    <label for="type">Type :</label>
    <select class="form-control" [(ngModel)]="order.type" ngControl="type">
        <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>
</div>

在我的 order-details.component 中,我有一个 updateOrder(),它从 myApp.services 调用 updateOrder()。

我的问题是当我尝试将数据从表单发送到后端时:所有带有 <input> 的部分都可以,但不是那些带有 <select> 的(它返回原始值,而不是所选值)。

有没有人遇到过这个或类似的问题? 感谢您的帮助!

最佳答案

有一种方法可以从不同的选项中获取值。 检查这个plunker

组件.html

 <select class="form-control" #t (change)="callType(t.value)">
      <option *ngFor="#type of types" [value]="type">{{type}}</option>
    </select>

组件.ts

this.types = [ 'type1', 'type2', 'type3' ];
   this.order = {
      type: 'type1'          
  };  

  callType(value){
    console.log(value);
    this.order.type=value;
  }

关于forms - Angular 2 : How to get the selected value from different options of a form?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34950160/

相关文章:

angular - 如何放入 Angular 模板以检查特定数组是否包含具有等于某个值的属性的对象?

html - 使用位置和 z-index 无法点击超链接

javascript - angularjs - 表单和验证

jquery - 在提交表单时调用js函数并阻止ajax请求完成后提交表单

jquery - 如何在JQuery中的select标签中选择指定选项时编写if语句

javascript - 如何为 ngFor 循环添加条件

javascript - 结算表格问题

javascript - 光滑的轮播同步选择

jquery - HTML Select 仅添加到最后一行

Angular 通用 : How to create an app shell and only pre-render the shell?