Angular2 formControl for select multiple
Solution 1
I got it working. The trick was to make sure that the value is always an array, even when nothing is selected.
<select multiple class="ui fluid dropdown" [formControl]="myForm.controls.category">
<option *ngFor="let item of categories" [ngValue]="item">{{item}}</option>
</select>
When creating the FormControl
make sure the blank value is an empty array, rather than ''
or undefined
.
this.control = new FormControl([]);
I'm not using Semantic-UI, just standard Angular 2
Solution 2
Working in ionic2 and reactive forms, I was able to validate a multiple select using the validator 'required' only, minlength() did not work. You need to pass null to the model if you want not to pass the validation. Empty array will pass the 'required' validation. A bit weird if you ask me.
Solution 3
I tried Daniel's answers for my ionic project & it works. Here is a sample if anyone is looking
buildForm() {
this.registerForm = this.formBuilder.group({
'contact': ['03007654321', [Validators.required]],
'agree': [true, Validators.requiredTrue],
'categories': this.formBuilder.array([]),
'locations': [[], Validators.required],
});
}
and in your HTML template use it like this
<ion-item >
<ion-label>Gender</ion-label>
<ion-select multiple="true" [formControl]="registerForm.controls.locations">
<ion-option value="f">Female</ion-option>
<ion-option value="m">Male</ion-option>
</ion-select>
</ion-item>
Note: I'm using this in ionic on ion-select but I am guessing it'll work with regular HTML select( ) too.
smartmouse
Considerable experience in web applications development, both as front-end developer and as CMS webmaster. Bitcoin and blockchain enthusiast as writer, speaker and developer of personal projects. An effective communicator with good leadership and analytical skills. Seeking new challenges and responsibilities to progress career. Spare time is for reading news, traveling and working on new ideas...
Updated on December 28, 2020Comments
-
smartmouse about 3 years
I'm using Sematinc-UI and Angular2
ReactiveFormsModule
form and i'd like to use[formControl]
for select multiple.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>
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
What could be the problem?