角2フォーム選択タグ付きで送信

Question

私は角度2のフォームを残りのAPIに送信しようとしています。私の問題は選択タグ名にラベル値を付けることです。

例：

これは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:spanish: </label> 
     <select class="form-control" name="note1" 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">english: </label> 
     <select class="form-control" name="note2" 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:frensh: </label> 
     <select class="form-control" name="note3" 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> 

は1を選択スペイン語（ラベル1の値）も

コンポーネント。 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); 
    } 

} 

すべてのものの仕事は、[OK]を私はすべてのselectタグに別の名前与える場合：

を、すべては私がすべての選択のラベル値を表示する代わりに、その名前の、名前を持って選択します。

Answer 1

LABELs are not form elements that can hold or send data. They are captions tied to form elements.

ので、ラベルを提出する上でngFormに送信されることはありません。

なぜ選択コントロールの名前としてあなたのラベル値を入れていない。このよう

<label for="select1" class="col-md-4 col-lg-4 col-sm-2 align form-control-label">Langues:spanish: </label> 
<select class="form-control" name="spanish" id="select1" ngModel> 
    <option>1</option> 
    <option>2</option> 
    <option>3</option> 
    <option>4</option> 
    <option>5</option> 
</select> 

あなたが求める結果を取得します：あなたに対処するために**

をコメントの場合は、ラベルテキストをコンポーネントの配列に保持することができます。

labelsName = [{select1: "your 15 words label"}, {select2: "another label"}] 

次に、提出すると、各セレクターの名前を配列のキーでマップしてラベルを取得します。