Forms - sravanthimendu98/angular GitHub Wiki

Link : https://www.youtube.com/watch?v=MtTeZtLC8Kc ==> Template form

Link : https://www.youtube.com/watch?v=kZAQ-IBO4qw ==> Reactive form

In Angular, there are two main types of forms:

  1. Template-driven forms
  2. Reactive forms (also known as model-driven forms).

Template-Driven Forms:

Angular form management is made easier with template-driven forms. They create and modify forms using directives, making them template-centric.

Key Concepts-

  1. ngModel Directive: Binds a property on the view model to an input, select, textarea, or custom form control.
  2. ngForm Directive: It gives access to the methods and properties of an Angular form instance by creating one.

Reactive Forms:

In Angular, handling forms can be done more explicitly and programmatically with reactive forms. Because they are component-centric, form controls can be created and altered dynamically.

Key Concepts-

  1. FormGroup and FormControl: Classes for programmatically creating a form model.
  2. FormBuilder: A service that offers syntactic sugar for form groups and controls creation.

Template Driven Forms Features:"

  • Easy to use

  • Suitable for simple scenarios and fails for complex scenarios

  • Similar to AngularJS

  • Two way data binding(using [(NgModel)] syntax)

  • Minimal component code

  • Automatic track of the form and its data(handled by Angular)

  • Unit testing is another challenge

Reactive Forms Features:

  • More flexible, but needs a lot of practice

  • Handles any complex scenarios

  • No data binding is done (immutable data model preferred by most developers)

  • More component code and less HTML markup

  • Handling an event based on a debounce time

  • Handling events when the components are distinct until changed

  • Adding elements dynamically

  • Easier unit testing