We recently kicked off our "Kendo UI DevChat" series on web development. If you missed it, check out the replay as we answer questions we couldn't get to live.
This week saw the first installation of our "Kendo UI DevChat" series aimed at tackling important topics around web development with a hands-on, code-only, presentation style. This first webinar was a session on best practices around building user-friendly forms with Angular. While focusing specifically on Google's Angular framework, all of these best practices can be implemented in any web form and could work across server-side (ASP.NET Ajax, ASP.NET MVC, JSP, etc.) and client-side implementations (jQuery, ReactJS, VueJS, EmberJS, Aurelia, etc.) alike. I wanted to summarize the event in a blog post to not only share the recording and project we created but also answer some questions that came through.
Webinar Recording & Sample Project
If you were unable to join me for the live webinar, or just wanted to see it all again (who wouldn't!?) we have the recording right here on our YouTube channel.
As for the sample project, you can find it right here on GitHub.
Questions and Answers
There were a ton of questions asked during the webinar but I wanted to highlight a few of them here since I think anyone that has watched the webinar will find them useful.
Which version of Angular and Angular Forms was this?
This particular webinar used Angular 4.2.2. The package.json for the solution has set up the Angular reference as "^4.0.0" so it should remain within 4.x.
Will this work with reactive forms?
First off, in case you're not familiar with Angular's reactive forms, here's a quick link to the Angular documentation. While what we did during the webinar was an example of a template-driven form, all of the best practices we brought up in the webinar will work for any type of approach to creating forms. So, with some tweaks to the approach (to make it reactive) we can still re-use most of the code from the webinar.
Are there best practices for what to do once a form is submitted? E.g. going to a new screen, popup message, etc.
We did just take a look at the form portion during the webinar and the answer becomes "it depends." This form could have already been in a popup, or maybe it was just a sign-up form. What to do next pretty much depends on the application requirements, but I would say that transitioning to the next screen is probably the most logical. If you want to have a success message I encourage that to be under the button area with green text stating success, then moving on to the next screen. A popup to declare success is too distracting.
What is your approach for nested forms validation using Template Forms you used?
Nested forms would most likely involve another Angular component rather than having a single overly-complicated component. We can then do validation within each of the components independently. Also, since we are doing validation on a field-by-field basis (rather than the full model upon submit) this also reduces complexity of validation in this case. Absolute worst-case scenario, if you need to communicate between two components, you can set something up in your service layer to deal with the communication.
If this would be a child component. How would you respond back to the parent component? What's the best practice to use this within another component?
The above question is pretty much related here. For any communication between Component A and Component B in Angular one should work with the service layer to push information back and forth. Rather than passing information from parent to child (or vice versa) I would suggest having the parent send information to the service layer and have the child pull data from there. You can of course pass data between components directly if need be. This documentation article in the official Angular docs dives more into this topic.
What is the best practice to set fixed height for validation (error) message? So that it doesn't move all elements below it.
This is something that I did not do in the webinar, but it's a great idea and I wish I had included it! Yes, not making the form elements move around is also a great practice in forms. Any kind of movement or shift in elements placement can be distracting to the user.
Are there other k-classes for laying out labels to the left?
Yes! Instead of using "k-form" we can use "k-form-inline." There's even more classes to use for forms so I recommend reading over the Kendo UI for Angular Form documentation section for more information.
How heavy this application becomes at the end with all those libraries loaded?
While yes, I did leverage Kendo UI for styling for my form elements, I did only include two actual widgets, the DatePicker and the Switch. For everything else I was merely using CSS classes to help improve the look and feel—even with the form layout! So, we're not really adding any bloat to the project since we're working with CSS classes to spruce things up a bit.
When we start working with more advanced components and Kendo UI we don't have to worry, because Kendo UI supports Ahead-of-Time (AoT) Compilation and Tree Shaking to reduce page bloat.
What IDE you are using and how we can leverage the Kendo UI components in this IDE
For this demo, I was using Atom, but you can use just about any IDE out there to work with Angular and Kendo UI. Visual Studio, Visual Studio Code, Sublime; really any text editor can work with these technologies.