Angular 表单下拉选择菜单值未定义-角度2

我试图获取所选下拉列表的值，我试图使用

console.log(this.myForm.controls['SignUpForm'].value['states'];

但它正在返回“未定义”。我们将非常感谢您的帮助。这是我的完整代码

index.component.html

<form novalidate [formGroup]="myForm" (ngSubmit)="onSignUp()" autocomplete="off">
  <div formGroupName="SignUpForm">
    <div>
      <select formControlName="state" title="University">
        <option *ngFor="let state of states" [ngValue]="state">{{state.abbrev}}</option>
      </select>
    </div>
  </div>
  <div>
    <button type="submit" name="action">Sign Up</button>
  </div>
</form>

---

你可以用两种方法。如果您希望以类似的方式传递

myForm.value

：

(ngSubmit)="onSignUp(myForm.value)" 

您可以从中提取值：

onSignUp(formValues): void {
  console.log(formValues.SignUpForm['state'])
}

如果不想这样做，可以使用以下方法获取值：

console.log(this.myForm.get('SignUpForm').get('state').value)

---

示例

我仍然没有定义。我是否在ngInit方法中正确初始化了它？您的代码（减去document.ready…）对我来说很好：我同意，但是当我删除document.ready代码时，下拉列表根本不会显示出来。我正在使用MaterializeCSS框架。是的，我知道您需要它，但我无法将其包含在我的plunker中，所以我只想指出，这是我唯一遗漏的内容：）嗯。肯定还有其他事情在进行，因为您提供的代码以及我的答案工作得很好，如图所示。你能试着在plunker中重现这个问题吗？我正在工作的项目非常庞大。但是关于我添加的菜单，唯一的事情是app.html文件中的CDN链接。

console.log(this.myForm.get('SignUpForm').get('state').value)