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-09 06:53:49Z

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 9, 2016 at 6:53

answered May 9, 2016 at 6:40

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hammer Over a year ago

can I use ngFormControl?

Hammer Over a year ago

Yes, I tried ngFormControl. It is working. For my case, I may not need a data model

Hammer Over a year ago

selected="selected" is not working, override by the data-binding

Hammer Over a year ago

Tks Gunter, it is working now <select class="form-control" id="groupingBySelect" [ngFormControl]="_reportGeneratingForm.controls['grouping']"> <option selected="selected">Day</option> <option>Hour</option> <option>week</option> <option>Month</option> </select>

Hammer Over a year ago

just to update that selected attribute is not working in this approach, you have to set the grouping value in ts

|

Dr. X · Accepted Answer · 2017-04-30 12:53:58Z

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, 2017 at 12:53

Dr. X

2,9402 gold badges18 silver badges37 bronze badges

Collectives™ on Stack Overflow

Two-way binding for select Angular2

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related