Creating forms in LitElement using Vaadin Fusion forms and TypeScript
Forms can be very time consuming to create. You need to synchronize data between UI fields and a data model, perform validations, and make sure you re-run those validations on the backend. Vaadin forms make this process super simple. Reuse Java validation rules in the frontend form, and have Vaadin automatically re-validate those on the server for added security.
Shortcuts:
0:00 - Intro
0:15 - LitElement data binding without forms
0:55 - Setup data model
1:32 - Defining validation rules with Java bean validation annotations
2:07 - Updating endpoint code
3:13 - Importing web components for different types of form fields
3:50 - Creating a Binder to track form state and handle validations
4:44 - Accessing the form data model
5:15 - Binding a UI field to the model with validations
7:48 - Submitting the form to the server
8:27 - Validations in action
9:44 - Debug printing objects with JSON.stringify
Download a starter project: https://start.vaadin.com/
Playlist: • TypeScript and Java web app development