Template-driven Forms vs. Reactive Forms

Template-driven Forms: Template-driven forms are created and controlled primarily in the template HTML

They rely on directives such as ngModel to bind form controls to properties in the component class. Validation is done using Angular template syntax.

Reactive Forms: It is the reactive forms that are created and controlled by different programming in the components class written in TypeScript.

They employ an efficient and design capable of adapting the procedure flow as per your needs. Reactive Forms have their own set of classes - FormControl, FormGroup and FormArray, which represent controls, groups and arrays, correspondingly.

Validator is responsible of making sure values are valid and provided by Angular.

Creating and Validating Forms in Angular

Template-Driven Forms:

HTML Template: Create the form structure in the template HTML file using HTML form elements and Angular directives like ngModel.

                          
<form (ngSubmit)="onSubmit()">
  <input type="text" name="username" [(ngModel)]="user.username" required>
  <button type="submit">Submit</button>
</form>

                          
                        

Component Class: Define the form model and handle form submission in the component class.

                          
import { Component } from '@angular/core';

@Component({
  selector: 'app-template-driven-form',
  templateUrl: './template-driven-form.component.html'
})
export class TemplateDrivenFormComponent {
  user = {
    username: ''
  };

  onSubmit() {
    console.log('Form submitted!', this.user);
  }
}

                          
                        

Reactive Forms:

Component Class: Define the form controls, groups, and arrays in the component class using FormControl, FormGroup, and FormArray.

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html'
})
export class ReactiveFormComponent implements OnInit {
  myForm: FormGroup;

  constructor(private formBuilder: FormBuilder) { }

  ngOnInit() {
    this.myForm = this.formBuilder.group({
      username: ['', Validators.required]
    });
  }

  onSubmit() {
    console.log('Form submitted!', this.myForm.value);
  }
}

                          
                        

HTML Template: Bind form controls to the form group defined in the component class using Angular form directives.

                          
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="username">
  <button type="submit">Submit</button>
</form>

                          
                        

Form Controls, Form Groups, and Form Arrays

FormControl: Represents an individual input control in a form. It tracks the value and validation state of the control.

FormGroup: Represents a group of form controls. It's used to structure forms and manage related data.

FormArray: Represents an array of form controls. It's used when you have multiple instances of the same form control, such as a list of items.