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

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

这是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>

在控制台日志中，它只显示文本输入和一个select值

---

所有

select

元素都具有相同的

名称

属性“note”。您可以更改它们以匹配元素的id：

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

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

// etc

//等

所有

select

元素都具有相同的

名称

属性“note”。您可以更改它们以匹配元素的id：

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

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

// etc

//等