Angular 2 ng-select multiple selected values issue

Question

I am working on Angular 2 and used library Angular 2 select component enter link description here

I need set default item selected but when I displayed select values I got some error. I have also check this link enter link description here for help but didn't work for me

Error is:

EXCEPTION: Uncaught (in promise): Error: Error in ./Jobs class Jobs - inline template:40:6 caused by: Cannot set property 'selected' of undefined

Template:

<form class="parsleyjs" data-validate="parsley" data-parsley-validate [formGroup]="form">
    <div class="row">
        <div class="col-md-12">
            <section widget class="widget">
                <header>
                    <h4>
                        <span class="fw-semi-bold">Jobs</span>
                    </h4>
                </header>
                <div class="widget-body">
                    <ng-select 
                        [options]="jobOptions"
                        multiple="true"
                        placeholder="Select Multiple Jobs"
                        formControlName="selectedJobsMultiple"
                        (selected)="jobsSelected($event)"
                        (deselected)="jobsDeselected($event)">
                    </ng-select>
                </div>
            </section>
        </div>
    </div>
</form>

Module:

import 'parsleyjs';

import { NgModule }      from '@angular/core';
import { CommonModule }  from '@angular/common';
import { RouterModule } from '@angular/router';
import { Jobs } from "./jobs.component";
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {SelectModule} from 'angular2-select';
export const routes = [
    {path: '', component: Jobs}
];

@NgModule({
    imports: [CommonModule, RouterModule.forChild(routes), FormsModule, SelectModule, ReactiveFormsModule],
    declarations: [Jobs],
})
export default class JobsModule {
    static routes = routes;
}

Component:

import { Component,ViewEncapsulation, Input ,Renderer, ElementRef, OnDestroy, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {Observable} from "rxjs/Rx";
import {FormControl, FormGroup} from '@angular/forms';

declare var jQuery, $:any;

@Component({
    selector: 'jobs',
    templateUrl: './jobs.template.html',
    encapsulation: ViewEncapsulation.None,
})
export class Jobs implements OnInit {

    jobSiteOptions: Array<any> = [];

    form: FormGroup;

    constructor() {
         this.jobOptions= [
            {
                value: 'a',
                label: 'Alpha'
            },
            {
                value: 'b',
                label: 'Beta'
            },
            {
                value: 'c',
                label: 'Gamma'
            }
        ];
    }


    jobsSelected(item) {
        console.log('- jobs selected (value: ' + item.value  + ', label:' + 
                       item.label + ')');
    }

    jobsDeselected(item) {
        console.log('- jobs deselected (value: ' + item.value  + ', label:' + 
                       item.label + ')');   
    }

    ngOnInit():void {
        jQuery('.parsleyjs').parsley();

        this.form = new FormGroup({});
        this.form.addControl('selectedJobsMultiple', new FormControl(['a','b']));
    }

}

Your code is almost exactly the same as the example from the angular2-select. Clone the example code, run it, and see that it works. Then walk the example code up to look exactly like your code, one step at a time. When it breaks, you'll see where you went wrong. — Kyle W. Cartmell
– Kyle W. Cartmell, Commented Nov 14, 2016 at 15:12

Nate May · Accepted Answer · 2016-11-14 06:54:18Z

3

looks like you passed jobOptions not jobSiteOptions

<ng-select 
   [options]="jobSiteOptions"
   multiple="true"
   placeholder="Select Multiple Jobs"
   formControlName="selectedJobsMultiple"
   (selected)="jobsSelected($event)"
   (deselected)="jobsDeselected($event)">
</ng-select>

answered Nov 14, 2016 at 6:54

Nate May

4,0717 gold badges40 silver badges92 bronze badges

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

2 Comments

Matthew Hegarty Over a year ago

the error means that you haven't set options correctly in ng-select. I agree with Nate that your code looks wrong: you declare 'jobSiteOptions' in your component but in ng-select you use 'jobOptions'

Kyle W. Cartmell Over a year ago

Well... he does set jobOptions in the component constructor. So that's probably not the issue?

Collectives™ on Stack Overflow

Angular 2 ng-select multiple selected values issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related