Devextreme-angular: ERROR TypeError: Cannot read property 'loadSingle' of undefined

[tonnilay]

Bug Report

i got this from nowhere wherenever i load the form
the error pointed on my html

type="required"
message="Leave type is required">

EpermitComponent.html:19 ERROR TypeError: Cannot read property 'loadSingle' of undefined
at inheritor._loadSingle (data_helper.js:93)
at inheritor._loadValue (ui.data_expression.js:76)
at inheritor._loadItem (ui.drop_down_list.js:267)
at inheritor._loadItem (select_box.js:506)
at inheritor._loadItem (class.js:17)
at inheritor._loadInputValue (select_box.js:519)
at inheritor._loadInputValue (class.js:17)
at inheritor._renderInputValue (ui.drop_down_list.js:239)
at inheritor._renderInputValue (class.js:17)
at inheritor._renderInputValue (select_box.js:261)
View_EpermitComponent_0 @ EpermitComponent.html:19
proxyClass @ compiler.js:19671
logError @ core.js:45546
handleError @ core.js:6066
(anonymous) @ core.js:41058
invoke @ zone-evergreen.js:359
run @ zone-evergreen.js:124
runOutsideAngular @ core.js:39572
tick @ core.js:41055
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onHasTask @ core.js:39719
hasTask @ zone-evergreen.js:411
_updateTaskCount @ zone-evergreen.js:431
_updateTaskCount @ zone-evergreen.js:264
runTask @ zone-evergreen.js:185
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1640
load (async)
customScheduleGlobal @ zone-evergreen.js:1742
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1911
(anonymous) @ http.js:2569
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
(anonymous) @ Observable.js:91
ZoneAwarePromise @ zone-evergreen.js:876
toPromise @ Observable.js:89
(anonymous) @ permit.service.ts:34
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone-evergreen.js:876
__awaiter @ tslib.es6.js:69
getPermit @ permit.service.ts:33
(anonymous) @ epermit.component.ts:511
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone-evergreen.js:876
__awaiter @ tslib.es6.js:69
loadEleave @ epermit.component.ts:487
(anonymous) @ epermit.component.ts:555
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto. @ zone-evergreen.js:1428
ngOnInit @ epermit.component.ts:520
checkAndUpdateDirectiveInline @ core.js:31910
checkAndUpdateNodeInline @ core.js:44367
checkAndUpdateNode @ core.js:44306
debugCheckAndUpdateNode @ core.js:45328
debugCheckDirectivesFn @ core.js:45271
eval @ EpermitComponent_Host.ngfactory.js? [sm]:1
debugUpdateDirectives @ core.js:45259
checkAndUpdateView @ core.js:44271
callViewAction @ core.js:44637
execEmbeddedViewsAction @ core.js:44594
checkAndUpdateView @ core.js:44272
callViewAction @ core.js:44637
execEmbeddedViewsAction @ core.js:44594
checkAndUpdateView @ core.js:44272
callWithDebugContext @ core.js:45632
debugCheckAndUpdateView @ core.js:45194
detectChanges @ core.js:31126
ngAfterContentChecked @ epermit-admin.component.ts:251
callProviderLifecycles @ core.js:32324
callElementProvidersLifecycles @ core.js:32293
callLifecycleHooksChildrenFirst @ core.js:32275
checkAndUpdateView @ core.js:44276
callViewAction @ core.js:44637
execEmbeddedViewsAction @ core.js:44594
checkAndUpdateView @ core.js:44272
callViewAction @ core.js:44637
execEmbeddedViewsAction @ core.js:44594
checkAndUpdateView @ core.js:44272
callViewAction @ core.js:44637
execComponentViewsAction @ core.js:44565
checkAndUpdateView @ core.js:44278
callWithDebugContext @ core.js:45632
debugCheckAndUpdateView @ core.js:45194
detectChanges @ core.js:31126
tick @ core.js:41045
(anonymous) @ core.js:40893
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
run @ core.js:39511
next @ core.js:40890
schedulerFn @ core.js:35336
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
emit @ core.js:35298
checkStable @ core.js:39642
onLeave @ core.js:39760
onInvokeTask @ core.js:39683
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
ZoneTask.invoke @ zone-evergreen.js:454
timer @ zone-evergreen.js:2650
setTimeout (async)
scheduleTask @ zone-evergreen.js:2671
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleMacroTask @ zone-evergreen.js:234
scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1107
(anonymous) @ zone-evergreen.js:2686
proto. @ zone-evergreen.js:1428
doPopup @ epermit-admin.component.ts:162
(anonymous) @ epermit-admin.component.ts:207
fulfilled @ tslib.es6.js:70
invoke @ zone-evergreen.js:359
onInvoke @ core.js:39699
invoke @ zone-evergreen.js:358
run @ zone-evergreen.js:124
(anonymous) @ zone-evergreen.js:855
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
drainMicroTaskQueue @ zone-evergreen.js:559
invokeTask @ zone-evergreen.js:469
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1640
load (async)
customScheduleGlobal @ zone-evergreen.js:1742
scheduleTask @ zone-evergreen.js:378
onScheduleTask @ zone-evergreen.js:272
scheduleTask @ zone-evergreen.js:372
scheduleTask @ zone-evergreen.js:211
scheduleEventTask @ zone-evergreen.js:237
(anonymous) @ zone-evergreen.js:1911
(anonymous) @ http.js:2569
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ catchError.js:16
subscribe @ Observable.js:23
subscribeToResult @ subscribeToResult.js:9
_innerSub @ mergeMap.js:59
_tryNext @ mergeMap.js:53
_next @ mergeMap.js:36
next @ Subscriber.js:49
(anonymous) @ subscribeToArray.js:3
_trySubscribe @ Observable.js:42
subscribe @ Observable.js:28
call @ mergeMap.js:21
subscribe @ Observable.js:23
call @ filter.js:13
subscribe @ Observable.js:23
call @ map.js:16
subscribe @ Observable.js:23
(anonymous) @ Observable.js:91
ZoneAwarePromise @ zone-evergreen.js:876
toPromise @ Observable.js:89
(anonymous) @ permit.service.ts:34
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone-evergreen.js:876
__awaiter @ tslib.es6.js:69
getPermit @ permit.service.ts:33
(anonymous) @ epermit-admin.component.ts:203
(anonymous) @ tslib.es6.js:73
ZoneAwarePromise @ zone-evergreen.js:876
__awaiter @ tslib.es6.js:69
viewRow @ epermit-admin.component.ts:200
eval @ EpermitAdminComponent.html:155
handleEvent @ core.js:43993
callWithDebugContext @ core.js:45632
debugHandleEvent @ core.js:45247
dispatchEvent @ core.js:29804
(anonymous) @ core.js:31837
schedulerFn @ core.js:35379
__tryOrUnsub @ Subscriber.js:183
next @ Subscriber.js:122
_next @ Subscriber.js:72
next @ Subscriber.js:49
next @ Subject.js:39
fireEvent @ devextreme-angular-core.js:62
fireEvent @ events_mixin.js:28
config.beforeExecute @ component.js:381
execute @ action.js:61
(anonymous) @ component.js:355
result @ component.js:388
(anonymous) @ speed_dial_item.js:287
callHandler @ events_engine.js:143
wrappedHandler @ events_engine.js:167
handleCallback @ events_engine.js:243
callHandlers @ events_engine.js:247
(anonymous) @ events_engine.js:432
(anonymous) @ events_engine.js:313
applyForEach @ events_engine.js:77
(anonymous) @ events_engine.js:92
object. @ dependency_injector.js:24
fireEvent @ utils.js:195
clickHandler @ click.js:93
callHandler @ events_engine.js:143
wrappedHandler @ events_engine.js:167
handleCallback @ events_engine.js:243
callHandlers @ events_engine.js:247
(anonymous) @ events_engine.js:258
invokeTask @ zone-evergreen.js:391
onInvokeTask @ core.js:39680
invokeTask @ zone-evergreen.js:390
runTask @ zone-evergreen.js:168
invokeTask @ zone-evergreen.js:465
invokeTask @ zone-evergreen.js:1603
globalZoneAwareCallback @ zone-evergreen.js:1629
Show 198 more frames
EpermitComponent.html:19 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 94, nodeDef: {…}, elDef: {…}, elView: {…}}

Package versions:

devexteme version: 19.2.6
devextreme-angular version: 19.2.6

Steps to reproduce:

Current behavior:
everytime the form / component load , it show Cannot read property 'loadSingle' of undefined

Expected behavior:

Screenshots:

[artem-kurchenko]

Hi,

Judging by the call stack you provided, the error occurs in SelectBox on loading a value. However, it's not clear how to reproduce it locally as your description doesn't contain the dataSource implementation.

Would you please modify our Customize Item demo to demonstrate the issue? Extract the demo into a stand-alone example using the "Copy To CodeSandBox" button and modify it using the "Save" button to apply changes. Then, post the updated link here for further examination. Alternatively, you can use our project template as a starting point.

[tonnilay]

thanks for pointing me the loading value , the problem solve once i put the load value in constructor.