title: Value of select drop down list with reactive forms in Angular 4
body: <p>I created a form using ReactiveForms module in Angular 4. In my .ts file:</p>
  
  <pre><code>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);
  }
  </code></pre>
  
  <p>And in my html:</p>
  
  <pre><code>&lt;form [formGroup]="myForm" (ngSubmit)=onSubmit()&gt;
    &lt;select name="datatypes"
            id="datatypes"
            formArrayName="dataTypes"&gt;
  
            &lt;option *ngFor="let dataType of myForm.get('dataTypes').controls;
                            let dataIndex=index"
                            [ngValue]="dataIndex"&gt;
                            {{ dataType.value }}
            &lt;/option&gt;
    &lt;/select&gt;
  
    &lt;button type="submit"&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>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?</p>