CODEWITHSUNDEEP
javascripthtmlangular
user1298416
user1298416

Reputation: 341

Angular 2 select does not bind

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

Upvotes: 0

Views: 789

Answers (2)

alexKhymenko
alexKhymenko

Reputation: 5598

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

Upvotes: 3

Garth Mason
Garth Mason

Reputation: 8001

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>

Upvotes: 2

Related Questions