javascript - 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>

这是 typescript 文件

 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

您需要在选项标签上绑定(bind) [ngValue]，以使支持模型遵循您的 View 。

那么它看起来像这样:

<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>