Angular 2选择不绑定

Question

I played with this for quite awhile, selection list shows okey, but I cannot get it to display the selected value - it is empty. What am I doing wrong?

  <div class="form-group"> <label for="ai_total_volume_select">Select Volume Range:</label> <select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select"> <option [value]="item1">Select</option> <option [value]="item2">&lt; 0.5 cm3</option> <option [value]="item3">&gt; 0.5 cm3</option> </select> </div> <label>AAA</label> <div>{{selectedValue}}</div> 

EDIT: I played a bit more and now know where the problem is coming from, but have no clue how to fix it. This select field is within:

 <form [formGroup]="form"> 

. And somehow it does not like it. Once I move it outside the form - it works! But I need it to be within the form. Other fields - checkboxes, inputs etc work perfectly fine in the same form...

Answer 1

You messed up a little bit with value you are passing empty object. Add ' ' and it will work created plunker .

<select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select">
  <option [value]="'item1'">Select</option>
  <option [value]="'item2'">&lt; 0.5 cm3</option>
  <option [value]="'item3'">&gt; 0.5 cm3</option>
</select>

or use value without []

<form #f="ngForm" (ngSubmit)="onSubmit(f)" novalidate>

 <select class="form-control" [(ngModel)]="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</option>
  <option value="item2">&lt; 0.5 cm3</option>
  <option value="item3">&gt; 0.5 cm3</option>
 </select>
</form>

for Reactive Forms use FormControlName

 <form [formGroup]="form">
   <select class="form-control" formControlName="selectedValue" name="items" id="ai_total_volume_select">
  <option value="item1">Select</option>
  <option value="item2">&lt; 0.5 cm3</option>
  <option value="item3">&gt; 0.5 cm3</option>
  </select>
<form>

{{form.controls.get('selectedValue').value}}

For better understanding template syntax read this article

ngForm and Reactive Forms

Answer 2

Unless the item values are defined in your component you don't need the [value] binding.

You can use standard html here:

<option value="item1">Select</option>
<option value="item2">&lt; 0.5 cm3</option>
<option value="item3">&gt; 0.5 cm3</option>