Angular 2：在提交时将json对象中的所有表单字段提交

Question

我有一个表单有多个字段，我想在提交时检索数据。

这是component.html：

<div class="ui raised segment"> 
    <h2 class="ui header">Demo Form: Sku</h2> 
    <form #f="ngForm" 
     (ngSubmit)="onSubmit(f.value)" 
     class="ui form"> 

    <div class="field"> 
     <label for="skuInput">SKU</label> 
     <input type="text" 
      id="skuInput" 
      placeholder="SKU" 
      name="sku" ngModel> 
    </div> 
    <div class="field"> 
     <label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note" id="select1" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note" id="select2" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

     <label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:français/anglais: </label> 
     <select class="form-control" name="note" id="select3" ngModel> 
     <option>1</option> 
     <option>2</option> 
     <option>3</option> 
     <option>4</option> 
     <option>5</option> 
     </select> 

    </div> 

    <button type="submit" class="ui button">Submit</button> 
    </form> 
</div> 

这里的component.ts：

import {Component, OnInit} from '@angular/core'; 

@Component({ 
    selector: 'app-post-history', 
    templateUrl: './post-history.component.html', 
    styleUrls: ['./post-history.component.css'] 
}) 
export class PostHistoryComponent implements OnInit { 

    constructor() { 
    } 

    ngOnInit() { 
    } 

    onSubmit(form: any): void { 
    console.log('you submitted value:', form); 
    } 

} 

在控制台登录它告诉我只有文字输入和只有一个选择值！

Answer 1

你的所有select元素有 “注意” 一样name属性。你可以改变它们以匹配id的元素：

<select class="form-control" name="note1" id="select1" ngModel> 

<select class="form-control" name="note2" id="select2" ngModel> 

// etc