Why forms matter in Angular - See It in Action

Why forms matter in Angular

📖 Scenario: You are building a simple contact form for a website using Angular. This form will collect a user's name and email address. Forms are important in Angular because they help manage user input, validate data, and provide feedback.

🎯 Goal: Create a basic Angular standalone component with a form that has two input fields: one for name and one for email. Use Angular's reactive forms to set up the form controls and display the form in the template.

📋 What You'll Learn

Create a standalone Angular component named ContactFormComponent

Set up a reactive form with two controls: name and email

Add a template with a form containing two input fields bound to the form controls

Include a submit button inside the form

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps for collecting user data like contact info, feedback, or orders. Angular's form handling makes it easier to manage input and validation.

💼 Career

Understanding Angular forms is essential for frontend developers working with Angular to build interactive and user-friendly web applications.

1

Set up the form controls

In the ContactFormComponent, import FormGroup and FormControl from @angular/forms. Create a contactForm variable of type FormGroup with two controls: name and email, both initialized with empty strings.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: ``,
  imports: []
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
  // Your code here
}

Need a hint?

Use new FormGroup with an object containing name and email keys, each assigned new FormControl('').

2

Add ReactiveFormsModule to imports

Import ReactiveFormsModule from @angular/forms and add it to the imports array in the @Component decorator of ContactFormComponent.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: ``,
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
  // Your code here
}

Need a hint?

Remember to import ReactiveFormsModule and add it to the imports array in the component decorator.

3

Create the form template

In the template property of @Component, write a form using the [formGroup] directive bound to contactForm. Inside the form, add two input elements with formControlName attributes set to name and email respectively. Also add a button of type submit with the text 'Submit'.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      
      
      Submit
    
  `,
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });
  // Your code here
}

Need a hint?

Use the [formGroup] directive on the form tag and formControlName on each input.

4

Add form submission handler

Add a method named onSubmit() in ContactFormComponent that will be called when the form is submitted. Update the form tag to use (ngSubmit)="onSubmit()". Inside onSubmit(), add a comment // Handle form submission here.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      
      
      Submit
    
  `,
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  onSubmit() {
    // Handle form submission here
  }
  // Your code here
}

Need a hint?

Add the (ngSubmit) event on the form and create the onSubmit() method in the component class.