title: angular 2 form submit with select tag
body: <p>I trying to send form with angular 2 to rest api, my problem is I want to give a select tag name the label value.</p>
  
  <p>example : </p>
  
  <p>this is the component.html : </p>
  
  <pre><code>&lt;div class="ui raised segment"&gt;
    &lt;h2 class="ui header"&gt;Demo Form: Sku&lt;/h2&gt;
    &lt;form #f="ngForm"
          (ngSubmit)="onSubmit(f.value)"
          class="ui form"&gt;
  
      &lt;div class="field"&gt;
        &lt;label for="skuInput"&gt;SKU&lt;/label&gt;
        &lt;input type="text"
               id="skuInput"
               placeholder="SKU"
               name="sku" ngModel&gt;
      &lt;/div&gt;
      &lt;div class="field"&gt;
        &lt;label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;Langues:spanish: &lt;/label&gt;
        &lt;select class="form-control" name="note1" id="select1" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;label for="select2" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;english: &lt;/label&gt;
        &lt;select class="form-control" name="note2" id="select2" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
        &lt;label for="select3" class="col-md-4 col-lg-4 col-sm-2 align form-control-label"&gt;Langues:frensh: &lt;/label&gt;
        &lt;select class="form-control" name="note3" id="select3" ngModel&gt;
          &lt;option&gt;1&lt;/option&gt;
          &lt;option&gt;2&lt;/option&gt;
          &lt;option&gt;3&lt;/option&gt;
          &lt;option&gt;4&lt;/option&gt;
          &lt;option&gt;5&lt;/option&gt;
        &lt;/select&gt;
  
      &lt;/div&gt;
  
      &lt;button type="submit" class="ui button"&gt;Submit&lt;/button&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the the name of <strong>select 1</strong> be <strong>spanish</strong> (value of label 1)</p>
  
  <p>component.ts : </p>
  
  <pre><code>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);
    }
  
  }
  </code></pre>
  
  <p>every thing work ok if i give every select tag a different name : </p>
  
  <p><a href="https://i.stack.imgur.com/YaN05.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/YaN05.png" alt="every select have name, instead of that name I want to show the label value of every select"></a></p>
  
  <p>every select have name, instead of that name I want to show the label value of every select.</p>