RadDataForm fires form validate events before any user input

[tsonevn]

From @bearoutthere on February 8, 2018 11:2

Please, provide the details below:

Did you verify this is a real problem by searching the [NativeScript Forum

yes

Tell us about the problem

When initializing a RadDataForm containing properties that have valuesProviders with the array of key / value pairs in order to show labels in the list picker while saving ids to the db the forms propertyValidate and propertyValidated events are triggered, which they shouldn't since the user did not provide any input and nothing needs to be validated.

Which platform(s) does your issue occur on?

Both

Please provide the following version numbers that your issue occurs with:

• CLI: (run tns --version to fetch it) 3.3.1
• Cross-platform modules: (check the 'version' attribute in the node_modules/tns-core-modules/package.json file in your project)
• Runtime(s): (look for the "tns-android" and "tns-ios" properties in the package.json file of your project) tns-android 3.3.1
• Plugin(s): (look for the version number in the package.json file of your project) "nativescript-plugin-firebase": "^5.1.1", "nativescript-pro-ui": "3.2.0", "nativescript-theme-core": "1.0.4", "tns-core-modules": "3.4.0"

Please tell us how to recreate the issue in as much detail as possible.

RadDataForm includes a field with a values provider bound to an observable property on the model. The model loads the list from the db.

<df:EntityProperty name="province" displayName="Province" index="13" required="true"  valuesProvider="{{ provinces }}" >
                        <df:EntityProperty.editor>
                            <df:PropertyEditor type="Picker" />
                        </df:EntityProperty.editor>
                    </df:EntityProperty>

The list contains key value pairs and only the key is stored in the forms source object.

this.province = [
        { key: "0", label: "" },
        { key: "2", label: "Province 1" },
        { key: "4", label: "Province 2" },
        { key: "1", label: "Province 3" },
        { key: "5", label: "Province 3" } 
...
    ];

When the form loads initially the entityProperty.source["province"] is 1 but the editor shows "Province 3" as it should. However during the initial load the propertyValidate and propertyValidated events are triggered, which they shouldn't since no user input was received so there's nothing to validate.

After the form is loaded and a user actually makes a different selection from the list the debugger shows that args.entityProperty.value === null, which is also not an expected behavior since the correct value is shown in the editor.
There's something wrong with how the form is handling propertyProviders.

Is there code involved? If so, please share the minimal amount of code needed to recreate the problem.

Copied from original issue: NativeScript/NativeScript#5402

[KirilOkun]

It appears that the entityProperty.value gets set to null in the dataform.android.js on line 387.

 onAfterCommit: function (property) {
                var entityProperty = that.get().getPropertyByName(property.name());  <--  this line

This is clearly a bug since the correct data is overwritten.

It is also unclear why addValidationListener gets called since there's no validator setup on the property either in xml nor in code.

[tsonevn]

Hi @bearoutthere, Could you provide sample project, which could be used for debugging and also could demonstrate the bug you are reporting? In the meantime, I would suggest to setup commitMode property for the DataForm component.

[KirilOkun]

commitMode is set to "Immediate". What's the best way to setup a project for you to access?

[tsonevn]

For your case, I would suggest to set up the commitMode to OnLostFocus, if you need to get the value just after it has been entered. Or you could set the mode to Manual if you want to handle the changes on a specific event(for example, on Button tap).

[KirilOkun]

I tried that as well. But the main issue has nothing to do with the commit mode actually. The validate events get triggered while the form is initially loading and before the user has a chance to enter anything. and the entityProperty.value as well as the binded value in the source object get set to null in the method i mentioned above.

[KirilOkun]

what's the best way to share a project with you?

[tsonevn]

You could attach it here to the issue. However, if this is not applicable to you, you could also send it to me via private message in our community Slack - nativescriptcommunity.slack.com. My nickname is nikts

[KirilOkun]

Hello,
do you guys have any idea when this is going to be fixed? I'm finding that i have to jump through a lot of hoops to avoid firing logic tied to the validate events for the initial form load and it is rather problematic. The initial load of the data into the form should not be triggering any validation automatically. The fact that it does is causing a lot of problems. Would you please expedite the fix if possible or at least let us know when it will be fixed.
Thanks in advance.

[KirilOkun]

I'd like to make another related suggestion. Please pass entityProperty.valueCandidate to the onCommit and onCommitted events. Those events are the best hooks for database persistence and it would be very convenient to know what the previous value was in case database write failed and we need to roll the value back. It would be much easier to do that if entityProperty kept both values until onCommitted event. Currently value and valueCandidate are always the same in this in this event. Thanks.

[KirilOkun]

Also just noticed that propertyValidate event fires for every field even before the page's loaded event. This makes no sense at all. The page has not finished loading yet. How is it possible that the form fields are getting validated?

[KirilOkun]

propertyVlidate event also fires when entityProperty values provider list is loaded and the entity value is translated from the key to the visible label. It shouldn't since the user did not enter anything and nothing should be validated. this becomes important when values provider is updated dynamically.

[tgpetrov]

Hi @bearoutthere Last week we released a new version of nativescript-ui-dataform with some fixes in the value providers that I believe are related with your issue. Please check the 3.7.3 version and let me know if the issue persists. You can also have a look at this example, which covers a scenario with two Picker editors with related values. In this example we are logging in the console information about the commit and validation events and there doesn't seem to be any validation events before the value is changed by the user. As you can see, we are also logging the valueCandidate which is available at all of these events as you have suggested.

[agallo73]

any news? Did you try applying the same logic after a commit ? I'm trying modifying the source object after a commit happens but if i set commit mode to immediate the ui blocks because each time i modify a character in the text field the commit method fires. Any ideas? I would like to use this components but i need a way to update the model when something changes in an other text or switch control. Please help me. Thanks

[KirilOkun]

eventually i gave up on the ns dataform and switched to Angular forms. they are much more powerful and flexible.