Using Reactive Patterns in Angular Forms

We will dive deeper into an alternative approach offered by the Angular framework for forms creation, i.e., reactive forms. Reactive forms, as the name implies, provide access to web forms in a reactive manner. They are built with reactivity in mind, where input controls and their values can be manipulated using observable streams. They also maintain an immutable state of form data, making them easier to test because we can be sure that the state of the form can be modified explicitly and consistently.

Reactive forms have a programmatic approach to creating form elements and setting up validation rules. We set everything up in the component class and merely point out our created artifacts in the template.

The Angular key classes involved in this approach are the following:

• FormControl: Represents an individual form control, such as an <input> element

• FormGroup: Represents a collection of form controls. The <form> element is the topmost FormGroup in the hierarchy of a reactive form.

• FormArray: Represents a collection of form controls, just like FormGroup, but can be modified at runtime. For example, we can add ...