Day 5: Forms in Angular

🚀 Check Out My YouTube Channel! 🚀

Hi everyone! If you enjoy my content here on Dev.to, please consider subscribing to my YouTube channel devDive with Dipak. I post practical full-stack development videos that complement my blog posts. Your support means a lot!

In the previous blog post, we explored the topic of Routing and Navigation in Angular. Today, we will dive into the world of Forms in Angular, which are essential for building interactive and data-driven web applications.

Angular provides two main approaches to working with forms: Template-Driven Forms and Reactive Forms. Let's explore each of them in detail.

Template-Driven Forms

Template-Driven Forms are the simpler of the two approaches, where the form logic is defined directly in the template (HTML) using Angular's built-in directives. Here's an example:

<!-- template-driven-form.component.html -->
<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="name" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="email" required>
  </div>
  <button type="submit">Submit</button>
</form>

// template-driven-form.component.ts
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

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

  onSubmit(form: NgForm) {
    console.log('Form submitted:', form.value);
  }
}

Reactive Forms

Reactive Forms, on the other hand, are more powerful and flexible, as they allow you to define the form structure and validation rules in the component's TypeScript code. Here's an example:

// reactive-form.component.ts
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

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

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

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

<!-- reactive-form.component.html -->
<form [formGroup]="myForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" formControlName="name">
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" formControlName="email">
  </div>
  <button type="submit">Submit</button>
</form>

Both approaches have their own advantages and use cases. Template-Driven Forms are simpler to set up and work well for simple forms, while Reactive Forms offer more control, flexibility, and scalability for complex forms.

Conclusion

In this blog post, we have explored the two main approaches to working with forms in Angular: Template-Driven Forms and Reactive Forms. By understanding the differences and use cases of each approach, you can choose the one that best fits your application's requirements and provide a seamless user experience for your form-based interactions.

In the next blog post, we will dive into the topic of HTTP Client in Angular, which is essential for fetching and manipulating data from a server.

Comments

[Dipak Ahirav]

Next part -> Part - 6