In This Blog, You are going to learn Angular Forms and these approaches. By using Angular Forms you can do Form Handling In Angular.
Pre-Requisites
- Angular Components
- Component Class
- HTML Template
- Two-Way Data Binding
- Template Reference Variable
Angular Forms
- Angular forms are used to handle user’s input.
- We can use Angular form in our application to enable users to login, to update profile, to enter information, and to perform many other data-entry tasks.
Forms In Angular
- In Angular, there are 2 approaches to handle user’s input through forms:
- Template-driven forms
- Reactive forms (Model Driven Forms)
- In Angular, both approaches are used to collect user input events from the view, validate the user input, create a form model and data model to update, and provide a way to track changes.
Template Driven Forms In Angular
- In Angular, Template-driven forms are best if you want to add a simple form to your application. For example: login, contact, signup form.
- In Angular, Template-driven forms are easy to use in the application but they are not as scalable (expandable / upgradable) as Reactive forms.
- In Angular, Template-driven forms are mainly used if your application’s requires a very basic form and logic. It can easily be managed in a HTML template.
- In Angular, Template driven forms is created using directives in the template. Example: ngForm, ngModel
- Basic HTML validations can be used to validate the form fields. Example: required, maxlength, minlength, pattern.
- In the case of custom validations, directives can be used.
- In Angular, Template-driven forms are less explicit.
- They are created in HTML template.
- They are created by directives.
- It works like Asynchronously
- Controls can be added to the form using the ngModel directive.
Reactive Forms In Angular
- In Angular, Reactive forms are more robust.
- They are created in component class.
- In Angular, Reactive forms are more scalable, reusable, and testable.
- They are most preferred to use if forms are a key part of your application.
- In Angular, Reactive forms are more explicit (manual).
- It works like Synchronously
- In Angular, Reactive forms are code-driven, unlike the template-driven approach.
- In Angular, Reactive forms eliminate the anti-pattern of updating the data model via Two-Way data binding.
Source Code Of Template Driven Forms
tdf.component.html File Code
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="bg-primary p-3 text-center">
<h2>Template Driven Form</h2>
</div>
<form #newForm="ngForm" (ngSubmit)="save(newForm.value)">
<div class="form-group">
<label for="">Enter Name: </label>
<input type="text" name="name" class="form-control" placeholder="Enter Name" ngModel>
</div>
<div class="form-group">
<label for="">Enter Age: </label>
<input type="number" name="age" class="form-control" placeholder="Enter Age" ngModel>
</div>
<div class="form-group">
<label for="">Enter Email: </label>
<input type="text" name="email" class="form-control" placeholder="Enter Email" ngModel>
</div>
<br>
<div class="d-grid">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</form>
</div>
</div>
</div>
tdf.component.ts File Code
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-tdf',
templateUrl: './tdf.component.html',
styleUrls: ['./tdf.component.css']
})
export class TdfComponent implements OnInit {
constructor() { }
save(formData:any){
// console.log(formData.value);
console.log(formData);
}
ngOnInit(): void {
}
}
index.html File Code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyForm</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>
app.component.html File Code
<app-tdf></app-tdf>Download Notes Of This Blog, From The Link Given Below.
https://www.mediafire.com/file/8494l7aaakqs6gv/ANGULAR+FORMS.rar/file
Download Source Code Of This Blog, From The Link Given Below.
https://www.mediafire.com/file/xxx34mjj0ygtjpy/my-form.rar/file
No responses yet