在Angular 4中选择具有反应形式的下拉列表的值(Value of select drop down list with reactive forms in Angular 4)

 我使用Angular 4中的ReactiveForms模块创建了一个表单。在我的.ts文件中： 
 
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);
}
 
 并在我的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>
 
 在点击提交按钮时，我试图控制登录提交表单的值。 带有下拉列表的表单显示正确。 第一步是提取用户选择的drop drop列表的值。 但是console.log给出了一个包含所有三个值的数组，而不是所选的值。 myForm.value如何在提交时只有选定的dataTypes值？ 

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?

原文：https://stackoverflow.com/questions/48379209