Angular 2 选择菜单值

Question

我正在尝试获取此下拉列表的值，但我得到的是一个空字符串。

    <form novalidate [formGroup]="myForm" (ngSubmit)="test()" autocomplete="off">
<divformGroupName="SignUpForm">
    <div class="row">
        <div>
         <select formControlName="helloworld" title="University">
           <option *ngFor="let firstname of names">{{firstname}}</option>
         </select>
        </div>
    </div>
</div>
  <div>
<button type="submit" name="action">Sign Up</button>
</div>
</form>

这是打字稿文件

 myForm: FormGroup;

  constructor(private _fb: FormBuilder) { }

  list = [
    {"name": "A"},
    {"name": "B"},
    {"name": "C"},
  ];
  names: Array<string> = this.list.map(id => id.name);

  test(){
    console.log(this.myForm.controls['SignUpForm'].value['helloworld']);
  }

  ngOnInit() {
    this.myForm = this._fb.group({
      SignUpForm: this._fb.group({
        helloworld: ['', Validators.compose([
          Validators.required,
        ])]
    }),
    });

我无法获得选择菜单的值。当我执行 console.log 时，我得到一个空字符串。

任何帮助将不胜感激。谢谢。

Answer 1

根据此处的文档：

https://angular.io/docs/ts/latest/api/forms/index/SelectControlValueAccessor-directive.html

您需要在选项标签上绑定 [ngValue] 以使支持模型跟随您的视图。

然后看起来像这样：

<form novalidate [formGroup]="myForm" (ngSubmit)="test()" autocomplete="off">
<divformGroupName="SignUpForm">
    <div class="row">
        <div>
         <select formControlName="helloworld" title="University">
           <option *ngFor="let firstname of names" [ngValue]="firstname">{{firstname}}</option>
         </select>
        </div>
    </div>
</div>
  <div>
<button type="submit" name="action">Sign Up</button>
</div>
</form>

Answer 2

如前所述，像这样使用ngValue：

<option *ngFor="let firstname of names" [ngValue]="firstname">

否则对我来说唯一的问题似乎是这一行缺少空格：

<divformGroupName="SignUpForm">

应该是

<div formGroupName="SignUpForm">

我对您的确切代码做了一个 plunker，它似乎与上述调整工作正常。只是如果你想仔细检查工作代码，这里是

Plunker