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