Nativescript RadDataForm value of source text fields

Question

My code is similiar like here https://play.nativescript.org/?template=play-vue&id=TO4i2n&v=4

I need the values of RadDataForm to update Vuex state object which one is the source for RadDataForm.

So i wanted to do like this but no with single text field but with RadDataForm https://vuex.vuejs.org/guide/forms.html

Vuex Store:

const state = {
    items: { 
        mainTab: {
          HPval: 10,
          MANA: 0,
          'type': '',
        },
}

RadDataForm

                <StackLayout row="0">
                    <RadDataForm
                        :source="mainTab"
                        @propertyCommitted="updateMessage"
                        :metadata="mainTabMetadata">
                    </RadDataForm>
                </StackLayout>

 computed: {
         ...mapState({
                mainTab: state => state.inputValues.items.mainTab,
         })
}

And on propertyCommited run method updateMessage. I need the value (text) of actualmodified field but there is no value. You can see I want to commit mutation to update state like here https://vuex.vuejs.org/guide/forms.html but I do not have value .

updateMessage (e) {
            console.log("PropertyCommitted");
             console.log(e);
            //console.log(e);
            //console.log(this.val);
            //console.dir(e.text);
            this.$store.commit('updateMessage', e.target.value) 
         },

and this is mutation in store

updateMessage (state, data) {
      state.items = data
      console.log("PropertyCommitted mutation fired");
    }

console log gives.


JS: object: RadDataForm(940) 
JS: editor: "undefined" 
JS: entityProperty: EntityProperty(958)
JS: propertyName: "MANA" 
JS: group: "undefined" 
JS: groupName: "DefaultGroup" 
JS: returnValue: "true"

On normal TextField I can use v-model and get value and commit mutation but how to work around with RadDataForms?

There is written https://docs.nativescript.org/ui/professional-ui-components/DataForm/GettingStarted/dataform-start-result

The other event - propertyCommitted - is called after the property is committed so you can use it to get the new value from the source object or through the RadDataForm's editedObject property.

https://docs.nativescript.org/ns-ui-api-reference/classes/raddataform#editedobject

How to use it?

Manoj Manoj · Accepted Answer · 2019-03-28T15:35:23

Try this,

     updateMessage (e) {
        let property = data.object.getPropertyByName(data.propertyName);
        this.$store.commit('updateMessage', property.valueCandidate);
     },

Nativescript RadDataForm value of source text fields

1 Answers