Creating Reactive Form In Angular
Reactive Forms Introduction – Reactive Forms In Angular
Creating Form Using Reactive Forms In Angular – Angular Reactive Forms

Difference Between Template Driven & Reactive Forms

Template Driven Forms

  • Simple Basic Forms
  • Easy to start with
  • Based on HTML template

Reactive Forms

  • Complex form with more control.
  • Structure of form is defined in TypeScript class.

Angular Reactive Forms

Introduction To Reactive Forms

  • Angular provides two ways to work with forms: template-driven forms and reactive forms (also known as model-driven forms).
  • In Angular, Template-driven forms are the default way to work with forms in Angular.
  • In Angular, With template-driven forms, template directives are used to build an internal representation of the form.
  • In Angular, With reactive forms, you build your own representation of a form in the component class.
  • In Angular, Reactive forms also known as Model-driven forms
  • In Angular, Reactive forms were introduced with Angular 2
  • In Angular, There is no need of Two Way Binding In Reactive Forms.

Reactive Forms Angular

  • In Angular, Reactive forms are forms where we define the structure of the form in the component class. i-e, we create the form model with Form Groups, Form Controls and Form Arrays.
  • We also define the validation rules in the component class.
  • Then, we bind it to the HTML form in the template.
  • This is different from the template-driven forms, where we define the logic and controls in the HTML template.

Here are some of the advantages of reactive forms:

  • Using custom validators
  • Changing validation dynamically
  • Dynamically adding form fields

Creating Form Using Reactive Forms

How to use Reactive Forms

  1. Create a new angular app.
  2. Import ReactiveFormsModule
  3. Create Form Model in component class using FormGroup, FormControl & FormArrays
  4. Create the HTML Form resembling the Form Model.
  5. Bind the HTML Form to the Form Model

Source Code

app.component.ts File Code

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

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'reactive-forms';

 signupForm = new FormGroup({

  name: new FormControl(''),
  age: new FormControl(''),
  email: new FormControl('')



app.component.html File Code

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="bg-primary p-4 text-center">
        <h1>Reactive Forms</h1>
      <form [formGroup]="signupForm" (ngSubmit)="handleSubmit()">
        <div class="form-group">
          <label for="">Enter Name: </label>
          <input type="text" name="name" class="form-control" formControlName="name">
        <div class="form-group">
          <label for="">Enter Age: </label>
          <input type="number" name="age" class="form-control" formControlName="age">
        <div class="form-group">
          <label for="">Enter Email: </label>
          <input type="email" name="email" class="form-control" formControlName="email">
        <div class="d-grid">
          <input type="submit" value="Submit" class="btn btn-primary">

app.module.ts File Code

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]
export class AppModule { }

index.html File Code

<!doctype html>
<html lang="en">
  <meta charset="utf-8">
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

Download Notes Of This Blog From the link given below

No responses yet

Leave a Reply

Your email address will not be published. Required fields are marked *