Web applications are usually doing one of two things. Either displaying data or collecting data. The way we collect data through web apps is the use of forms. In more specifically, <form> elements.

AngularJS2 forms

When we build forms in web apps, we architect them to do a common set of things,

  • for a way to collect data,
  • for a way to know when user changes data,
  • for validating data
  • for showing errors to users.

AngularJS2 forms

Since forms are a common piece of web app development, Angular has dedicated code endless framework, to help when working with forms.

Angular forms builds upon bind data and bind events, and provides data binding, both in and out. It also provides indicators out of the box for you to know when form fields have changed from their original value, and when they are invalid.

AngularJS2 forms

Angular forms provides

  • Built-In data Validators
  • Custom Validator - the ability to create your own Validator
  • Async Validators - that can run validation has the user changes input value.
  • Form Object Representation - It also wraps up form fields into an object structure for ease of use on submission.

There are two common approaches to building forms in Angular.

  1. Template Driven, where the marjority of the form logic is crafted in the template mark up.
  2. Model Driven, where the marjority of the form logic is crafted in the component class. Overall, the form support built into Angular covers a wide range of input collection scenarios.