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>
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('.+')]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With