Multiselect in ngForm using HTML

Question

I am trying to create a multiselect dropdown which is bound to a dynamic property that is getting data from JSON script using service. I was able to show the data in the dropdown easily but whenever I put multiple attribute inside the select tag, the dropdown just starts behaving abnormally and I also can't multiselect the data.

I tried using another ng-multiselect-dropdown package but it was also getting quite tricky. I would like to do it with simple HTML checkboxes and using ngModel. I am sending data to POST request so basically I am trying to send multiple values at the backend.

How can I make this work?

<div class="col-sm-4">
    <div class="form-group form-float">
        <div class="form-line focused">
            <select id="teacherSubjects" #teacherSubjects=ngModel multiple="multiple" required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacher.teacherSubjects"
                    (change)="onSelect($event.target.value)">
                <option style="display:none"></option>
                <option *ngFor="let x of subjects" [value]="x.code">{{x.name}}</option>
            </select>
            <label for="teacherSubjects" class="form-label">Subjects</label>
        </div>
        <div *ngIf="teacherSubjects.invalid && teacherSubjects.untouched">
            <span class="label ">Untouched</span>
        </div>
        <div *ngIf="teacherSubjects.invalid && teacherSubjects.touched">
            <div *ngIf="teacherSubjects.errors.required">
                <span class="label ">
                    <span class="text-danger">Subject is required</span>
                </span>
            </div>
        </div>
        <div *ngIf="teacherSubjects.valid">
            <span class="label ">ok</span>
        </div>
    </div> 
</div>

Try this one https://stackoverflow.com/questions/17714705/how-to-use-checkbox-inside-select-option here used bootstrap multi select and also javascript multiselect with checkbox — Karnan Muthukumar, Jul 13 '18 at 14:35
I have tried it already but not of much help this one was. I need help with binding my model with the dropdown along with multiselect. i can add multiselect but then the model binding becomes difficult. So apparently there are two issues and i have created this thread so that i can get two answers with one post. — CsgUy, Jul 13 '18 at 15:54

Karnan Muthukumar · Answer 1 · 2018-07-13T14:08:57.337

Here is an example for html multiselect example for you.

Stackblitz iam made for you.
https://stackblitz.com/edit/angular-multi-select-example-itmvgc

Html File,

 <select id="teacherSubjects"  multiple="multiple" required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacherSubjects"
  (change)="onSelect($event)">
    <option style="display:none"></option>
    <option *ngFor="let x of myOptions" [value]="x">{{x.name}}</option>
  </select>

or

 <select id="teacherSubjects"  multiple required class="validate form-control" name="teacherSubjects" [(ngModel)]="teacherSubjects"
      (change)="onSelect($event)">
        <option style="display:none"></option>
        <option *ngFor="let x of myOptions" [value]="x">{{x.name}}</option>
      </select>

Typescript File,

teacherSubjects:any;
myOptions = [        
    { id: 1, name: 'Car brands', isLabel: true },
    { id: 2, name: 'Volvo', parentId: 1 },
    { id: 3, name: 'Honda', parentId: 1 },
    { id: 4, name: 'BMW', parentId: 1 },
    { id: 5, name: 'Colors', isLabel: true },
    { id: 6, name: 'Blue', parentId: 5 },
    { id: 7, name: 'Red', parentId: 5 },
    { id: 8, name: 'White', parentId: 5 }
];
onSelect(event){
    console.log("Value in 2",this.teacherSubjects);        
}

Note:-

Iam created sample variable and use in select function.You can change your conveninent. And also iam get hole value of an object while using this line,

[value]="x"

you can access like your choice, like name, id etc.

[value]="x.name"
[value]="x.id"

like this,

Screenshot,

I hope its helpful for you.

i have tried it too but as i mentioned in the description above that adding multiple="multiple" is not working properly and also the dropdown do not behave like a dropdown, instead on page load it is already opened and completely out of its alignment — CsgUy, Jul 13 '18 at 14:05
ok just remove and use like simply use this word """multiple""". see iam updating my answer in stackblitz — Karnan Muthukumar, Jul 13 '18 at 14:06
you have to choose multiple field in select box you can hold shift button and choose all.Iam updated my answer. In stackblitz — Karnan Muthukumar, Jul 13 '18 at 14:08
"""multiple""" is not a right way to do it since it brings errors in html script and the app do not run. also i want to select two or three items only so i would like to have a checkbox option which would be more better i guess — CsgUy, Jul 13 '18 at 14:23
it says template parse error which is obviously because of this """multiple""" attribute but when removed, there is no error — CsgUy, Jul 13 '18 at 14:31

Multiselect in ngForm using HTML

1 Answers1