forme angulaire 2 soumettre avec select tag

Question

Je tente d'envoyer un formulaire avec angulaire 2 pour se reposer api, mon problème est que je veux donner un nom de balise select la valeur de l'étiquette.

exemple:

c'est le 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> 

Je veux que le nom de sélectionner 1 être espagnol (valeur de l'étiquette 1)

composant

. 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); 
    } 

} 

chaque travail chose ok si je donne chaque balise choisir un nom différent:

tous les sélectionner avoir le nom, au lieu de ce nom, je veux montrer la valeur de l'étiquette de chaque sélectionner.

Answer 1

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

Ainsi, l'étiquette n'est pas envoyé avec le ngForm sur soumettre.

Pourquoi ne pas mettre votre valeur d'étiquette comme le nom de la commande de sélection:

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

Comme cela, vous obtiendrez le résultat que vous cherchez:

** Pour répondre à votre commenter, vous pouvez toujours garder votre texte d'étiquettes dans un tableau sur le composant comme:

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

Ensuite, lorsque vous obtenez votre soumission, vous mappez le nom de chaque sélecteur avec la clé de votre tableau pour obtenir l'étiquette.