CODEWITHSUNDEEP
htmlformsangularsubmit
547n00n
547n00n

Reputation: 1536

angular 2 form submit with select tag

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.

example :

this is the 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>

I want the the name of select 1 be spanish (value of label 1)

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

}

every thing work ok if i give every select tag a different name :

every select have name, instead of that name I want to show the label value of every select

every select have name, instead of that name I want to show the label value of every select.

Upvotes: 0

Views: 1281

Answers (1)

BogdanC
BogdanC

Reputation: 2784

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

So, the label is not sent with the ngForm on submit.

Why not putting your label value as the name of the select control:

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

Like this you will get the result you seek:

result

** To address your comment, you can always keep your labels text in an array on the component like:

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

Then, when you get your submit, you map the name of each selector with the key on your array to get the label.

Upvotes: 1

Related Questions