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
- Create a new angular app.
- Import ReactiveFormsModule
- Create Form Model in component class using FormGroup, FormControl & FormArrays
- Create the HTML Form resembling the Form Model.
- 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';
@Component({
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('')
});
handleSubmit(){
console.log(this.signupForm.value);
}
}
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>
</div>
<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>
<div class="form-group">
<label for="">Enter Age: </label>
<input type="number" name="age" class="form-control" formControlName="age">
</div>
<div class="form-group">
<label for="">Enter Email: </label>
<input type="email" name="email" class="form-control" formControlName="email">
</div>
<br>
<div class="d-grid">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>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';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
ReactiveFormsModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
index.html File Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ReactiveForms</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
</head>
<body>
<app-root></app-root>
</body>
</html>
Download Notes Of This Blog From the link given below
https://www.mediafire.com/file/y2elke0531hpm2z/Reacive+Forms.rar/file
No responses yet