Two-way binding for select Angular2

Question

Angular2, in my ts, I have a control group, how can I have the two-way binding for the select in my html using ngFormControl?

form.component.ts

this._reportGeneratingForm = fb.group({
 ......

  selectedGroup: ['']
})

form.component.html

  <select class="form-control" ????>
      <option>Day</option>
      <option>Hour</option>
      <option>week</option>
      <option>Month</option>
    </select>

Günter Zöchbauer · Accepted Answer · 2016-05-09T06:53:49.970

7

<select class="form-control" [(ngModel)]="someProperty">
  <option>Day</option>
  <option>Hour</option>
  <option>week</option>
  <option>Month</option>
</select>

where someProperty is a property on the components class that holds the value or

<select class="form-control" [ngFormControl]="selectControl">
  <option>Day</option>
  <option>Hour</option>
  <option>week</option>
  <option>Month</option>
</select>

This only works properly on all browsers if you have a recent Angular2 version (>= beta.16)

edited May 09 '16 at 06:53

answered May 09 '16 at 06:40

Günter Zöchbauer

623,577
216
2,003
1,567

can I use ngFormControl? – Hammer May 09 '16 at 06:41
1

Yes, I tried ngFormControl. It is working. For my case, I may not need a data model – Hammer May 09 '16 at 06:51
1

selected="selected" is not working, override by the data-binding – Hammer May 09 '16 at 08:55
I Plunker to see what you actually trying to accomplish and to be able to reproduce and debug the issue would be helpful. The `New` button in Plunker provides a Angular2 rx.1 template. – Günter Zöchbauer May 09 '16 at 08:56
1

Tks Gunter, it is working now – Hammer May 09 '16 at 08:59
1

just to update that selected attribute is not working in this approach, you have to set the grouping value in ts – Hammer May 09 '16 at 09:00

score 0 · Answer 2 · answered Apr 30 '17 at 12:53

0

In this example selected atribute is not working ! But in ts file

For the ngModel : You can write as someProperty = Day
For the ngFormControl: You can also write as selectControl.value= Day

It will works fine.

answered Apr 30 '17 at 12:53

Dr. X

2,890
2
15
37

Two-way binding for select Angular2

2 Answers2

Linked