Nativescript Angular NativeScriptUIDataForm: Editors don't work

android

#1

Dear comunity!

I am working on a nativescript angular project and I am trying to use the NativescriptUIDataform plugin. The installation and implementation did work. I get a generated form by NativescriptUIDataform.

package.json:

"nativescript-ui-dataform": "^3.7.0",

app.module.ts:

import { NativeScriptUIDataFormModule } from "nativescript-ui-dataform/angular";
...
@NgModule({
   ...
   imports: [
   ...
       NativeScriptUIDataFormModule
   ...

My newEntry.component.ts looks like this:

import { Component, OnInit } from "@angular/core";
import { RouterExtensions } from "nativescript-angular/router";
import { Entry } from "./entry";

@Component({
    selector: "newEntry",
    moduleId: module.id,
    templateUrl: "./newEntry.component.html"
})
export class NewEntryComponent implements OnInit {
    private _entry: Entry;

    constructor(private routerExtensions: RouterExtensions) {

    }

    get entry(): Entry {
        return this._entry;
    }

    set entry(value: Entry) {
        this._entry = value;
    }

    public goBack() {
        this.routerExtensions.backToPreviousPage();
    }

    ngOnInit() {

    }
}

And in my newEntry.component.html I have following:

<RadDataForm [source]="entry" tkExampleTitle tkToggleNavButton></RadDataForm>

To that point no problems appear. An automaticaly generated form appears in the app. But when I try to use the HTML Editors nothing changes only the automaticly generated form appears. Do I have to implement another module? What did I do wrong using the editors?

My newEntry.component.html with editors looks like this:

<RadDataForm [source]="entry" tkExampleTitle tkToggleNavButton>
    <TKEntityProperty tkDataFormProperty name="date" displayName="Date" index="0"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="credit" displayName="Creditaccount" index="1" valuesProvider="something, something">
        <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="debit" displayName="Debitaccount" index="2" valuesProvider="something, something">
        <TKPropertyEditor tkEntityPropertyEditor type="Picker"></TKPropertyEditor>
    </TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="value" displayName="Value" index="3" type="number"></TKEntityProperty>
    <TKEntityProperty tkDataFormProperty name="description" displayName="Description" index="4"></TKEntityProperty>
</RadDataForm>

Thank you for your answer in advance!


#2

What you have assigned to entry?


#3

Hi. Sorry for the late reply!

Entry is a class with following content:

export class Entry {
    public date: string;
    public debit: string;
    public credit: string;
    public value: number;
    public description: string;

    constructor(date: string, debit: string, credit: string, value: number, description: string) {
        this.date = date;
        this.debit = debit;
        this.credit = credit;
        this.value = value;
        this.description = description;
    }
}