Angular Forms Tutorial: A Comprehensive Guide with Code Examples

Forms are a crucial aspect of web applications, allowing users to input data for various purposes. Angular 7 provides robust support for forms, offering two primary approaches: template-driven forms and reactive forms. In this tutorial, we’ll explore both approaches, guiding you through their implementation with clear code examples.

Prerequisites

Before diving into Angular 7 forms, ensure you have Node.js and Angular CLI installed on your system. You can install Angular CLI using the following command:

npm install -g @angular/cli

1. Getting Started with Template-Driven Forms

Template-driven forms rely on directives in the template to create and manipulate the form model. Let’s create a simple form to collect user information.

Creating a Template-Driven Form Component

Create a new Angular component for the template-driven form:

ng generate component TemplateForm

Template-Driven Form Example

In the template-form.component.html file, add the following code:

<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <input type="text" name="name" ngModel required>
  <input type="email" name="email" ngModel required>
  <button type="submit">Submit</button>
</form>

In the corresponding template-form.component.ts file, add the following code:

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

@Component({
  selector: 'app-template-form',
  templateUrl: './template-form.component.html',
  styleUrls: ['./template-form.component.css']
})
export class TemplateFormComponent {

  onSubmit(form: any) {
    console.log(form.value);
  }

}

2. Reactive Forms in Angular 7

Reactive forms are more robust and flexible, allowing you to manage form data programmatically. Let’s create a reactive form to handle user authentication.

Creating a Reactive Form Component

Generate a new Angular component for the reactive form:

ng generate component ReactiveForm

Reactive Form Example

In the reactive-form.component.html file, add the following code:

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input type="text" formControlName="username">
  <input type="password" formControlName="password">
  <button type="submit" [disabled]="userForm.invalid">Login</button>
</form>

In the corresponding reactive-form.component.ts file, add the following code:

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {

  userForm: FormGroup;

  constructor(private fb: FormBuilder) {}

  ngOnInit() {
    this.userForm = this.fb.group({
      username: ['', Validators.required],
      password: ['', [Validators.required, Validators.minLength(6)]]
    });
  }

  onSubmit() {
    console.log(this.userForm.value);
  }

}

Conclusion

In this tutorial, you’ve learned how to work with forms in Angular 7 using both template-driven and reactive approaches. Template-driven forms are ideal for simple scenarios, while reactive forms offer more control and flexibility for complex requirements. Experiment with these examples to solidify your understanding and enhance your Angular skills.