Skip to content

formControl for multi select #12059

@smartm0use

Description

@smartm0use

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
I use ReactiveFormsModule and when i add formControl to multi select element i can't make it working. I get this error:

core.umd.js:3462 EXCEPTION: Uncaught (in promise): Error: Error in http://localhost:3000/app/components/category.component.js class CategoryComponent - inline template:0:1701 caused by: values.map is not a function

Expected behavior
I should use formControl to bind the multi select selected items to a variable. For example i could add to the select tag [formControl]="myForm.controls.cities" and get all selected items in myForm.controls.cities.value.

Minimal reproduction of the problem with instructions
If i use select it works with no problems:

        <select class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

If i use select multiple it doesn't work:

        <select multiple="" class="ui fluid dropdown" [formControl]="myForm.controls.category">
            <option *ngFor="let item of categories" value="{{item}}">{{item}}</option>
        </select>

Here is a Plunker

What is the motivation / use case for changing the behavior?
The use case is a select menu in which users can select more than choice.

Please tell us about your environment:
I'm on Linux Mint, using WebStorm as IDE and Gulp as build pipeline.

  • Angular version: 2.0.X
    I'm using Angular 2.0.
  • Browser:
    I tried it on Chromium and Firefox.
  • Language:
    Typescript 2.0.2, ES5

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions