Why forms matter in Angular

Introduction

Forms let users send information to your app. Angular helps you build forms easily and safely.

When you want users to sign up or log in.

When collecting feedback or survey answers.

When users fill out order or booking details.

When you need to validate user input before saving.

When you want to show helpful error messages as users type.

Syntax

Angular

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

@Component({
  selector: 'app-simple-form',
  template: `
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()">
      <input formControlName="name" placeholder="Name">
      <button type="submit">Send</button>
    </form>
  `
})
export class SimpleFormComponent {
  myForm = new FormGroup({
    name: new FormControl('')
  });

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

Angular uses FormGroup to group controls and FormControl for each input.

The [formGroup] directive links the form in HTML to the code.

Examples

This creates a form with email and password fields.

Angular

myForm = new FormGroup({
  email: new FormControl(''),
  password: new FormControl('')
});

Connects the input box to the email control in the form.

Angular

<input formControlName="email" placeholder="Email">

Runs when the user clicks the send button.

Angular

onSubmit() {
  alert('Form sent!');
}

Sample Program

This form collects an email and a message. It checks if the email is valid and shows an error if not. The send button is disabled until the email is correct. When sent, it shows a thank you alert and clears the form.

Angular

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

@Component({
  selector: 'app-contact-form',
  template: `
    <form [formGroup]="contactForm" (ngSubmit)="submitForm()">
      <label for="email">Email:</label>
      <input id="email" formControlName="email" placeholder="Enter your email" aria-label="Email">
      <div *ngIf="email.invalid && email.touched" style="color: red;">
        Please enter a valid email.
      </div>

      <label for="message">Message:</label>
      <textarea id="message" formControlName="message" placeholder="Your message" aria-label="Message"></textarea>

      <button type="submit" [disabled]="contactForm.invalid">Send</button>
    </form>
  `
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    email: new FormControl('', [Validators.required, Validators.email]),
    message: new FormControl('')
  });

  get email() {
    return this.contactForm.get('email')!;
  }

  submitForm() {
    if (this.contactForm.valid) {
      console.log('Form data:', this.contactForm.value);
      alert('Thank you for your message!');
      this.contactForm.reset();
    }
  }
}

Important Notes

Always add validation to catch mistakes early.

Use aria-label for better accessibility.

Disable the submit button if the form is invalid to guide users.

Summary

Forms let users send info to your app.

Angular makes forms easy with FormGroup and FormControl.

Validation and accessibility improve user experience.