formControl for multi select

[smartm0use]

Do you know that formControl for multi select doesn't correctly bind more than one selected item?
It get always the first selected item.

For example, if i have a multi select with [dog, cat, bird] and i select "cat" and "bird", in related myForm.controls.select.value i get just "cat" as string instead of "[cat, bird]" as array of string.

Can you check it out?

[tspayne87]

I ran into this issue as well, from what I can tell the underlining select is not being initialized correctly as a multiple select and the form control will pick which type of select it will be once the view is bound, it does not seem to update to multi-select if the select is changed by semantic-ui's javascript code. I have been able to fix this issue by adding a [attr.multiple] binding to the select. For example

Current

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "sm-select",
  template: `<div class="field" [ngClass]="{error: (!control?.valid && control?.touched) }">
  <label *ngIf="label">{{label}}</label>
<select [formControl]="control" class="ui {{class}} dropdown"  #select>
    <option value="">{{placeholder}}</option>
    <ng-content></ng-content>
</select>
</div>`
})

Altered too

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "sm-select",
  // The ternary operator in the [attr.multiple] needs to return null so that the attribute is not added to none multi-select fields
  template: `<div class="field" [ngClass]="{error: (!control?.valid && control?.touched) }">
  <label *ngIf="label">{{label}}</label>
<select [attr.multiple]="class != null && class.indexOf('multiple') !== -1 ? true : null" [formControl]="control" class="ui {{class}} dropdown"  #select>
    <option value="">{{placeholder}}</option>
    <ng-content></ng-content>
</select>
</div>`
})

However, if the attr.multiple binding adds the multiple after the init cycle of the view it will not update the formControl and the problem will persist. Hope this helps.

Update

The solution I gave above will not work all the time. What probably should happen is 'sm-select' should be broken down into two different components, like what is being done in Angular2 SelectControls, one for the single version of the select and the other for the multiple version. For instance the components should act the same as they do now however they will have different component declarations. Example:

Single Select

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "sm-select:not(.multiple)", // Selector changed to not include multiples
  template: `<div class="field" [ngClass]="{error: (!control?.valid && control?.touched) }">
  <label *ngIf="label">{{label}}</label>
<select [formControl]="control" class="ui {{class}} dropdown"  #select>
    <option value="">{{placeholder}}</option>
    <ng-content></ng-content>
</select>
</div>`
})

Multi Select

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: "sm-select.multiple",
  template: `<div class="field" [ngClass]="{error: (!control?.valid && control?.touched) }">
  <label *ngIf="label">{{label}}</label>
<select multiple [formControl]="control" class="ui {{class}} dropdown"  #select>
    <option value="">{{placeholder}}</option>
    <ng-content></ng-content>
</select>
</div>`
})

[paramah]

#181 simple change, forks for me.