DataForm Vue inconsistencies

[zbranzov]

iOS

• Validation with markup - does not trigger the validation
• Groups - no groups appeared
• Layouts - both examples don't have groups and items are ordered messy.

[msaelices]

@zbranzov I'd like to talk about the first of the problems, which I think could be a more general issue when using Vue with NS.

First a little background on how it works with Vue. When parsing the markup it founds something like v-tkEntityPropertyValidators, it processes the directive here, so then the DOM object is inserted it calls the setPropertyValidators.inserted callback. This function mimics the same as the Angular logic (for the same directive), setting the entityProperty.validators array, and it should ideally work well.

But the problem is that this change on the entityProperty does not trigger any change in the form itself. I think because a race condition due to the way the Vue and Angular processes the markup.

So, in the Angular version, the entityProperty validators are set before the source property is set in the [source]="user" markup, so the source property change triggers the onSourcePropertyChanged method which set the validator in the native form entities.

In the Vue case, the source change is triggered before the entityProperty validators are set, so the onSourcePropertyChanged set empty validators for the entities and the entityProperty validators change has no effect on the native form.

[msaelices]

@zbranzov this commit fix the problem and everything seems work well, but I'm not an expert in the library code so I don't know if is correct or maybe there is a better fix: https://github.com/NativeScript/nativescript-ui-dataform/commit/f37cbee5ac431227902b1d70a29314b842912d8e

[msaelices]

@zbranzov Also, as I guessed, this is a general issue and I've found that my commit also fixes the other problems in this issue: layouts and groups. So, I've created the PR ready for review: https://github.com/NativeScript/nativescript-ui-dataform/pull/78