What is a reactive form in Angular and how is it different from a template-driven form?

In Angular, there are two main approaches to creating forms: reactive forms and template-driven forms.

A reactive form, also known as a model-driven form, is a form that is created and managed in code, using the reactive programming pattern. With reactive forms, you define the form and its validation logic in a component class, and then bind the form to the template using Angular’s form directives. Reactive forms provide a greater degree of control and flexibility, as you can dynamically update the form and its validation rules, and you can also easily access the form data in the component class.

Here is an example of a simple reactive form:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-reactive-form',
  template: `
    <form [formGroup]="form">
      <input type="text" formControlName="name" />
      <div *ngIf="form.get('name').invalid && form.get('name').touched">
        Name is required
      </div>
    </form>
  `
})
export class ReactiveFormComponent {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
    this.form = this.fb.group({
      name: ['', Validators.required]
    });
  }
}

In this example, the reactive form is defined in the component class using the FormBuilder service. The form is created by calling the group method on the FormBuilder instance and passing an object that defines the form controls and their validation rules. The form is then bound to the template using the [formGroup] directive, which links the form to the component’s form property. The input element in the template is also bound to a form control using the formControlName directive, which links the control to the 'name' property of the form.

A template-driven form, on the other hand, is a form that is created and managed in the template, using Angular’s template syntax. With template-driven forms, you define the form and its validation logic directly in the template, using Angular’s form directives. Template-driven forms are easier to get started with and are suitable for simple forms with limited validation logic.

Here is an example of a simple template-driven form:

<form #form="ngForm">
  <input type="text" [(ngModel)]="name" name="name" required />
  <div *ngIf="form.submitted && name.invalid">
    Name is required
  </div>
</form>

In this example, the template-driven form is defined in the template using Angular’s form directives. The input element is bound to a property on the component using the [(ngModel)] directive, and the form control is defined using the name attribute. The required attribute is used to specify a validation rule. The form’s validity is checked in the template using the submitted property of the #form template reference variable and the invalid property of the name control.

In summary, reactive forms provide more control and flexibility, but can be more complex to implement, while template-driven forms are easier to get started with, but are less flexible and have limited capabilities.