RadDataform- Showing up errors for basic form


#1

Hi Guys,
I am relatively new to nativescript. Trying to implement RadDataForm with Angular 2. After following all the steps I am receiving the following error. I have configured my app .module folder and also installed the plugin. I would appreciate any help on this. Thank you

Code for component.ts

import { Component, OnInit } from ‘@angular/core’;
import { Person } from “…/_models/person”;
import { RadDataForm } from “nativescript-ui-dataform”;

@Component({
moduleId: module.id,
selector: ‘app-rate-request’,
templateUrl: ‘./rate-request.component.html’,
styleUrls: [’./rate-request.component.scss’]
})
export class RateRequestComponent implements OnInit {

private _person: Person;

constructor() {
}

ngOnInit() {
    this._person = new Person("John", 23, "john@company.com", "New York", "5th Avenue", 11);
}

get person(): Person {
    return this._person;
}

}

HTML:

<RadDataForm tkExampleTitle tkToggleNavButton [source]=“person”>

person.ts
export class Person {
public name: string;
public age: number;
public email: string;
public city: string;
public street: string;
public streetNumber: number;

constructor(name: string, age: number, email: string, city: string, street: string, streetNumber: number) {
    this.name = name;
    this.age = age;
    this.email = email;
    this.city = city;
    this.street = street;
    this.streetNumber = streetNumber;
}

}


#2

Have you declared tkExampleTitle & tkToggleNavButton in your project? If not, remove them and try again.


#3

Thanks @manojdcoder. Removed both of them and tried , but getting the same issue

System.err: com.tns.NativeScriptException:
System.err: Calling js method onCreateView failed
System.err:
System.err: TypeError: Cannot read property ‘RadDataForm’ of undefined
System.err: File: "file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ui-dataform/ui-dataform.js, line: 17, column: 73
System.err:
System.err: StackTrace:
System.err: Frame: function:‘RadDataForm.createNativeView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/nativescript-ui-dataform/ui-dataform.js’, line: 17, column: 74
System.err: Frame: function:‘ViewBase._setupUI’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 412, column: 35
System.err: Frame: function:’’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 456, column: 19
System.err: Frame: function:‘LayoutBaseCommon.eachChildView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js’, line: 125, column: 26
System.err: Frame: function:‘ViewCommon.eachChild’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js’, line: 699, column: 14
System.err: Frame: function:‘ViewBase._setupUI’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 455, column: 14
System.err: Frame: function:’’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 456, column: 19
System.err: Frame: function:‘ContentView.eachChildView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/content-view/content-view.js’, line: 70, column: 13
System.err: Frame: function:‘PageBase.eachChildView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/page/page-common.js’, line: 206, column: 40
System.err: Frame: function:‘ViewCommon.eachChild’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view/view-common.js’, line: 699, column: 14
System.err: Frame: function:‘ViewBase._setupUI’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 455, column: 14
System.err: Frame: function:‘ViewBase._addViewCore’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 357, column: 18
System.err: Frame: function:‘ViewBase._addView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js’, line: 346, column: 14
System.err: Frame: function:‘FragmentCallbacksImplementation.onCreateView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/frame/frame.js’, line: 504, column: 24
System.err: Frame: function:‘FragmentClass.onCreateView’, file:‘file:///data/data/org.nativescript.Groceries/files/app/tns_modules/tns-core-modules/ui/frame/fragment.js’, line: 27, column: 38
System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1088)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:970)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:957)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:941)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:933)
System.err: at com.tns.FragmentClass.onCreateView(FragmentClass.java:40)
System.err: at android.app.Fragment.performCreateView(Fragment.java:2353)
System.err: at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:995)
System.err: at android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1171)
System.err: at android.app.BackStackRecord.run(BackStackRecord.java:816)
System.err: at android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1578)
System.err: at android.app.FragmentManagerImpl$1.run(FragmentManager.java:483)
System.err: at android.os.Handler.handleCallback(Handler.java:751)
System.err: at android.os.Handler.dispatchMessage(Handler.java:95)
System.err: at android.os.Looper.loop(Looper.java:154)
System.err: at android.app.ActivityThread.main(ActivityThread.java:6119)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:886)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:776)
ActivityManager: Process org.nativescript.Groceries (pid 6903) has died
ActivityManager: cleanUpApplicationRecord – 6903


#4

Have you added NativeScriptUIDataFormModule to your module imports? If still facing issue, could you please try to replicate it in playground.


#5

I added the plugin in the Module. I will try to replicate it.


#6

Hi Manoj, I tried it in the playground (Good to know about it ). But, after going back and forth I created the whole project from scratch. Still faced the issue and then I removed android platform and added it again which worked finally!!! Thanks for your suggestions.


#7

saikunta’s note was what ultimately worked for me. Here’s the commands to remove and reinstall the android platform:

tns platform remove android --path TNSApp
tns platform add android --path TNSApp

This may be useful with errors about not being able to find RadDataForm, and if code including “com.telerik.widget.dataform.visualization.editors.DataFormSwitchEditor.class” says could not find “editors” on “undefined”.


#8

Can confirm that reinstalling the android platform with the commands above did the trick.