girish66 / nativescript-formily-example

Created with StackBlitz ⚡️

Nativescript + Formily

Edit in Codeflow ⚡️ (Just in case Stackblitz preview complains due to vue-demi , run npx vue-demi-switch 2 nativescript-vue)

What is Formily?

Formily

Formily is a Form Management Framework which can manage complex forms. It is developed by the Alibaba digital supply chain team. What it tries to solve is

1. Complex Form Data & State management
2. Complex Field association with Active and Reactive status
3. State Management.
4. (Web) Dev Tools
5. Drag and drop form builder called Formily Designer

Why with Nativescript ?

One key benefit is that it utilises JSON SCHEMA whereby the data model is translated into components.

Fromily does not provide its own rendering layer, instead it provides Bridiging capabilities such that the rendering can be handled by any framework. (They provide solutions for the web for several libraries such as Elements UI Vant etc ) This makes Formily a perfect candidate for form management with Nativescript.

In order to take advantage this repo

1. Wraps the Native elements for Input, Password, Switch
2. Adds some additional functionality for DatePicker and TimePicker to use the root layout.
3. More complex component such as for example a currency input, can be
   • Created
   • Wrapped
   • Exposed

Todo

• Input
• Textarea
• Password
• FormItem
• Tooltip w FormItem
• Form
• DatePicker
• TimePicker
• Switch
• Select
• Number
• Radio
• Checkbox
• Ensure that event data is bridged correctly. See here
• Mutliple JSONs to showcase the capabilities.

....and more to come

Shout out

Thanks @vallemar for helping me setup vue-demi

☕️

Want to buy me a ☕️ ?