Value of select drop down list with reactive forms in Angular 4

Question

I created a form using ReactiveForms module in Angular 4. In my .ts file:

myForm: FormGroup;
dataTypes: FormArray;

ngOnInit() {
  this.myForm = new FormGroup({});
  this.dataTypes = new FormArray([
      new FormControl("A"),
      new FormControl("B"),
      new FormControl("C")
  ]);
  this.myForm.addControl('dataTypes', this.dataTypes);
}

onSubmit() {
  console.log(this.myForm.value);
}

And in my html:

<form [formGroup]="myForm" (ngSubmit)=onSubmit()>
  <select name="datatypes"
          id="datatypes"
          formArrayName="dataTypes">

          <option *ngFor="let dataType of myForm.get('dataTypes').controls;
                          let dataIndex=index"
                          [ngValue]="dataIndex">
                          {{ dataType.value }}
          </option>
  </select>

  <button type="submit">Submit</button>
</form>

On clicking the submit button, I am trying to console log the value of the form submitted. The form with the drop down list is displayed correctly. The first step is to extract the value of the drop drown list selected by the user. But the console.log gives an array with all the three values and not the value selected. How will the myForm.value have only the selected value of dataTypes on submit?

Answer 1

@Shiv, not put the "options" in the Form

ngOnInit() {
  this.dataTypes=["A","B","C"] //<--just a variable
  this.myForm = new FormGroup({  //<--your form only have a control dataType
    datatype:""});
}
<form [formGroup]="myForm" (ngSubmit)=onSubmit()>
  <select name="datatype" id="datatype">
         <!--the ngFor of the variable dataTypes-->
          <option *ngFor="let dataType of dataTypes;let dataIndex=index"
              [ngValue]="dataIndex">{{dataType}}
          </option>
  </select>
  <button type="submit">Submit</button>
</form>

Answer 2

you can get the selected value using @ViewChild ( doc ) and ElementRef ( doc )

import {ElementRef, ViewChild} from '@angular/core';

myForm: FormGroup;
dataTypes: FormArray;
@ViewChild('mySelect') mySelect: ElementRef;

ngOnInit() {
  this.myForm = new FormGroup({});
  this.dataTypes = new FormArray([
      new FormControl("A"),
      new FormControl("B"),
      new FormControl("C")
  ]);
  this.myForm.addControl('dataTypes', this.dataTypes);
}

onSubmit() {
  console.log(this.mySelect.nativeElement.value); // here you console the selected value 
  console.log(this.myForm.value);
}

//===

<form [formGroup]="myForm" (ngSubmit)=onSubmit()>
  <select name="datatypes"
          id="datatypes"
          #mySelect
          formArrayName="dataTypes">

          <option *ngFor="let dataType of myForm.get('dataTypes').controls;
                          let dataIndex=index"
                          [ngValue]="dataIndex">
                          {{ dataType.value }}
          </option>
  </select>

  <button type="submit">Submit</button>
</form>

here I kept your code with as little changes as I could.

// ==========

here's without a local reference

has mentioned be Eliseo, you can simply define your select options as variables. insted of FormArray just use one formCtrl and bind it to your select element, in the onSubmit method fetch the value on that formCtrl.

myForm: FormGroup;
selectValues: string[] = ["A","B","C"];
constructor(private formBuilder: FormBuilder) {}

ngOnInit() {
    this.myForm = this.formBuilder.group({
        selectFormCtrl: ''
    });
}

onSubmit() {
      console.log(this.myForm.controls["selectFormCtrl"].value);
}

//==

  <form [formGroup]="myForm" (ngSubmit)=onSubmit()>
    <select formControlName="selectFormCtrl">
      <option *ngFor="let dataType of selectValues;"
              [ngValue]="dataType">
        {{ dataType }}
      </option>
    </select>

    <button type="submit">Submit</button>
  </form>