Angular2 reactive forms select multiple attribute?

Question

I use the following code in my app with reactive forms.

If I uncomment the [multiple] line, the Choose ... option does not set the dformControl form control object back to status INVALID.

dformControl.multiple by the way returns false. Even if I change the commented line to [multiple]="false", still switching back to the Choose ... option does NOT set the form control status to INVALID.

<select class="form-control"
        [id]="dformControl.key"
        [formControlName]="dformControl.key"
        /*[multiple]="dformControl.multiple"*/>

  <option *ngIf="!dformControl.value"
          value="">
    Choose ...
  </option>

  <option *ngFor="let opt of dformControl.options"
          [value]="opt.value"
          [selected]="dformControl.value == opt.value">
    {{opt.label}}
  </option>

</select>

Eddie Martinez · Accepted Answer · 2017-03-29 01:09:03Z

7

Bind to the multiple property at the select level to a boolean isMultiple. Then you can change it and the select will change as well. Take a look at the this, I change it using a button. plnkr

  <select formControlName="cars" [multiple]="isMultiple">
      <option></option>
      <option *ngFor="let car of cars" >{{car}}</option>
  </select>

It seems when adding the multiple property it is affecting the required validator. I was able to just add an extra validator and it worked as expected.

Validators.compose([Validators.required,Validators.pattern('.+')]

edited Mar 29, 2017 at 1:09

answered Mar 28, 2017 at 21:47

Eddie Martinez

13.9k15 gold badges86 silver badges109 bronze badges

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

4 Comments

Max Solid Over a year ago

you got a solution for this one?

Max Solid Over a year ago

in case dformControl.multiple returns true it should be a multiple select, in case it returns false ist should be a normal select.

Max Solid Over a year ago

so in your plunkr go choose a value WITHOUT switching to multiple. After that select the empty option again ... form's still valid ... and thats the problem I tried to describe above

Eddie Martinez Over a year ago

@MaxSolid I added new plunkr

Collectives™ on Stack Overflow

Angular2 reactive forms select multiple attribute?

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related