CODEWITHSUNDEEP
angularjsangularjs-ng-repeatng-optionsangularjs-ng-optionsjquery-select2
Abi P
Abi P

Reputation: 1450

Cannot read property 'disabled' of undefined

I am having an angular JS application. In this I have a dropdown in which I can create a new option by typing and pressing enter key. However when I press enter key I get some JS exceptions

Here is the exception

TypeError: Cannot read property 'disabled' of undefined
at angular.js:26183
at forEach (angular.js:336)
at readNgOptionsMultiple [as readValue] (angular.js:26181)
at angular.js:28062
at Scope.$get.Scope.$eval (angular.js:15830)
at Scope.$get.Scope.$apply (angular.js:15929)
at HTMLSelectElement.<anonymous> (angular.js:28061)
at HTMLSelectElement.jQuery.event.dispatch (jquery-2.1.4.js:4435)
at HTMLSelectElement.elemData.handle (jquery-2.1.4.js:4121)
at Object.jQuery.event.trigger (jquery-2.1.4.js:4350)

The file is Angular.js file and below is the location where it causes.

 forEach(selectedValues, function(value) {
        var option = options.selectValueMap[value];
        if (!option.disabled) selections.push(options.getViewValueFromOption(option));
      });

My HTML/Angular Code is as below

 <div class="row">
                        <div class="col-xs-12">
                            <div class="form-group form-md-line-input form-md-floating-label">
                                <select class="js-select2-tags form-control input-lg form-control-static" id="new-note-tags" name="note-tags" style="width: 100%" multiple="multiple" data-placeholder="Type one or more tags..."
                                        ng-model="addNote.AssociatedTags" ng-options="option.Name for option in NoteTags track by option.Name"
                                        data-rule-required="true"
                                        data-msg="Note tags cannot be empty"></select>
                                <label for="new-note-tags">Note Tags<span class="required"> * </span></label>
                            </div>
                        </div>
                    </div>

Could any one guide me here?

Update: I hve checked this and my observation is the newly added option is actually not getting added into the options. var option = options.selectValueMap[value];

I have added this code to make sure options are added. Looks like it is not working. Please note I have a multi select control.

$('.js-select2-tags', $container).select2({
        tags: true,
        multiple: true,
        placeholder: jQuery(this).data('placeholder'),
        allowClear: false
    })

enter code here

Upvotes: 0

Views: 10683

Answers (1)

Walfrat
Walfrat

Reputation: 5353

I would say probably because your new option doesn't have value so the options.selectValueMap doesn't work as expected.

It returns undefined

Just test with 

if(option && !option.disabled)

Upvotes: 0

Related Questions