Form submission handling in Angular - Mini Project: Build & Apply

Form submission handling

📖 Scenario: You are building a simple contact form for a website. Visitors can enter their name and email, then submit the form.

🎯 Goal: Create an Angular standalone component that shows a form with name and email fields and a submit button. When the form is submitted, the entered data should be stored in a variable.

📋 What You'll Learn

Use Angular standalone component with @Component and standalone: true

Create a reactive form with FormGroup and FormControl

Add name and email controls with empty initial values

Add a submit button that triggers a submitForm() method

Store the submitted form data in a variable called submittedData

💡 Why This Matters

🌍 Real World

Forms are everywhere on websites and apps for collecting user input like contact info, feedback, or orders.

💼 Career

Handling form submission is a fundamental skill for frontend developers working with Angular to build interactive user interfaces.

1

Set up the form controls

Create a standalone Angular component called ContactFormComponent. Inside it, create a FormGroup named contactForm with two FormControl fields: 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 {
  // Your code here
}

Need a hint?

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

2

Add the form template

Add HTML inside the component's template to create a form. Use [formGroup]="contactForm" on the <form> tag. Add two input fields bound to name and email using formControlName. Add a submit button with type submit.

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('')
  });
}

Need a hint?

Use [formGroup]="contactForm" on the form tag. Add inputs with formControlName="name" and formControlName="email". Add a submit button.

3

Add form submission logic

Add a method called submitForm() in the component class. This method should assign the current form values from contactForm.value to a new variable called submittedData. Also, add (ngSubmit)="submitForm()" to the <form> tag in the template to call this method on form submission.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      Name:
      

      Email:
      

      Submit
    
  `,
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  // Your code here
}

Need a hint?

Add (ngSubmit)="submitForm()" to the form tag. Create a submitForm() method that sets submittedData to this.contactForm.value.

4

Display submitted data

Below the form in the template, add a <div> that shows the submitted name and email from submittedData. Use Angular interpolation to display submittedData.name and submittedData.email. Only show this <div> if submittedData is defined using *ngIf.

Angular

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

@Component({
  selector: 'app-contact-form',
  standalone: true,
  template: `
    
      Name:
      

      Email:
      

      Submit
    

    
  `,
  imports: [ReactiveFormsModule]
})
export class ContactFormComponent {
  contactForm = new FormGroup({
    name: new FormControl(''),
    email: new FormControl('')
  });

  submittedData: any;

  submitForm() {
    this.submittedData = this.contactForm.value;
  }
}

Need a hint?

Use *ngIf="submittedData" on a div. Inside, show {{ submittedData.name }} and {{ submittedData.email }} with interpolation.