Connecting the Model to the View

Connecting forms to views

At a certain abstract level, any form has a data model attached to it, describing the properties of the form and the values they contain. For most forms, the parts of this data model are scattered around the view, several JavaScript files, and sometimes even partially stored on the backend.

Making changes to the form involves checking for conflicts at all layers.

Reactive forms instead use the concept of a central, class-based data model.

Everything in the form is routed through this model. It will even throw errors when you try to modify properties that don’t exist on the model. This is a huge and welcome change from JavaScript’s typical stance of silently allowing such changes, leading to developers thinking everything’s OK.

Data models are based on plain old JavaScript objects. At its simplest, a model for the registration form would look like the snippet shown below.

The entire form is defined in this one object, showing the requirements for each element and how subgroups relate to each other.