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

我制作了您的确切代码，并且上述调整似乎正常。如果你想仔细检查工作代码，这里是

Angular 2选择菜单值

2 个答案:

Plunker