CODEWITHSUNDEEP
angular
AngularM
AngularM

Reputation: 16648

In angular2 how can I do a select list using ngModel

In angular2 how can I do a select list using ngModel

I'm using the latest angular2 libraries.

My current attempt:

 <select class="col-xs-12 col-xs-offset-0 col-md-2 col-md-offset-0" id="County" name="county" [(ngModel)]="county">
                <option>Filter by County</option>
                <option *ngFor="let item of counties" value="" [value]="item.county"  placeholder="Search by County">{{item.county}}</option>
              </select>

Error I get:

zone.js?1477842549055:355 Unhandled Promise rejection: Template parse errors: Can't bind to 'ngModel' since it isn't a known property of 'select'. (" ][(ngModel)]="county">

Upvotes: 1

Views: 2648

Answers (2)

jasharbn
jasharbn

Reputation: 159

You should import FormsModule in your module, check out this example

<select [(ngModel)]="selectedValue" (ngModelChange)="selectedValue=$event;"> <option *ngFor="let item of _types | enumKeyValuelist;" [value]="item.key">{{item.value}}</option> </select>

Upvotes: 0

Rajesh Dan
Rajesh Dan

Reputation: 467

Have you imported the FormsModule in your App Module?

import { FormsModule }   from '@angular/forms';

This should work when using ngModel in any input/select element.

And the next thing, [value]="item.county" in option should be same as [(ngModel)]="county" in select tag.

<select class="col-xs-12 col-xs-offset-0 col-md-2 col-md-offset-0" id="County" name="county" [(ngModel)]="county">
            <option>Filter by County</option>
            <option *ngFor="let item of counties" value="" [value]="item"  placeholder="Search by County">{{item.county}}</option>
          </select>

i.e. the ngModel value should match the value in option.

Upvotes: 2

Related Questions