Using reactive patterns in Angular 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 how we create form elements and set up validation rules. We set everything up in the component class and merely point out our created artifacts in the template.

The key classes involved in this approach are as follows:

• 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 forms controls, just like FormGroup...