Angular is a platform and framework, written in TypeScript, for building single-page client applications. Applications commonly handle user input with the help of forms: to enable users to log in, update a profile, enter sensitive information, and perform many other data-entry tasks. Angular uses directives to match these attributes with validator functions in the framework.
Angular provides two different approaches for handling user input through forms
Reactive forms provide a model-driven approach by providing direct, explicit access to the underlying forms. Compared to template-driven forms, they are more robust, scalable, reusable, and testable. If forms are a key part of your application, or you're already using reactive patterns for building your application, use reactive forms.
In a reactive form, the source of truth is the component class. Instead of adding validators through attributes in the template, you add validator functions directly to the form control model in the component class.
Template-driven forms rely on directives in the template to create and manipulate the underlying object model. They are useful for adding a simple form to an app, such as an email list signup form. They're easy to add to an app, but they don't scale as well as reactive forms.
To add validation to a template-driven form, you add the same validation attributes as you would with native HTML form validation.
Having understood the common building blocks used by both approaches, you can now decide which type of form works best for your situation.
