Summary

This chapter was entirely dedicated to Angular forms. We started clarifying what a form actually is and enumerated the features it needs to have in order to fulfill its duties, grouping them into two main requirements: providing a good user experience and properly handling the submitted data.

We then turned our focus to the Angular framework and to the two form design models it offers: the Template-Driven approach, mostly inherited from AngularJS, and the Model-Driven or Reactive alternative. We took some valuable time to analyze the pros and cons provided by both of them, and then we performed a detailed comparison of the underlying logic and workflow. At the end of the day, we chose to embrace the Reactive way of doing things, as it gives more control to the developer and enforces a more consistent separation of duties between the Data Model and the Form Model.

Right after that, we went from theory to practice by testing our acquired knowledge on our client app's QuizEditComponent: we upgraded our previous, loosely Template-Driven form with a brand new Reactive form with improved UI and UX; we also added the data validation logic by making good use of the Angular Template Syntax in conjunction with the classes and directives granted by Angular's ReactiveFormsModule. Once done, we did the same with all our other form-based components--QuestionEditComponent, AnswerEditComponent, and ResultEditComponent--leaving the implementation to the reader, yet highlighting all the noticeable differences between them.

At the end of the upgrade process, we moved our first steps toward the world of form debugging and testing, using some of the most interesting features of the Model-Driven approach to fulfill a number of useful tasks: showing the JSON-serialized Form Model and form status on screen, subscribing to the Observables exposed by the form to react to user changes, using these subscriptions to hook the Visual Studio client-side debugger to the Reactive workflow, and so on.

Eventually, we spent a few words introducing the concepts of unit testing and test-driven development, which will be addressed in Chapter 9, Advanced Topics.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.12.108.175