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
}

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

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
}

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;
  }
}

Hint

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

Practice

1. What is the purpose of the (ngSubmit) directive in Angular forms?

easy

A. It binds the form inputs to component properties.

B. It listens for the form's submit event and triggers a handler function.

C. It disables the submit button when the form is invalid.

D. It styles the form elements automatically.

Solution

1. Step 1: Understand the role of (ngSubmit)

   The (ngSubmit) directive listens for the submit event on a form element in Angular.

2. Step 2: Identify what happens on submit

   When the form is submitted, (ngSubmit) triggers the specified handler function in the component.

3. Final Answer:

   It listens for the form's submit event and triggers a handler function. -> Option B

4. Quick Check:

   (ngSubmit) handles form submission event [OK]

Hint: Remember (ngSubmit) triggers code on form submit [OK]

Common Mistakes:

• Confusing (ngSubmit) with input binding
• Thinking (ngSubmit) disables buttons
• Assuming (ngSubmit) styles forms

2. Which of the following is the correct syntax to bind an input field to a component property named username using two-way binding in Angular?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall two-way binding syntax

   Angular uses [(ngModel)] for two-way data binding on form inputs.

2. Step 2: Match syntax to property

   The correct syntax to bind username is <input [(ngModel)]="username">.

3. Final Answer:

   <input [(ngModel)]="username"> -> Option A

4. Quick Check:

   Two-way binding = [(ngModel)] [OK]

Hint: Two-way binding always uses [(ngModel)] [OK]

Common Mistakes:

• Using only [ngModel] without parentheses
• Using (ngModelChange) alone without brackets
• Confusing event binding with property binding

3. Given the following Angular template snippet, what will be the value of submittedName after the form is submitted?

<form (ngSubmit)="submitForm()" #myForm="ngForm">
  <input name="name" [(ngModel)]="userName" required>
  <button type="submit" [disabled]="myForm.invalid">Submit</button>
</form>

And the component code:

userName = '';
submittedName = '';

submitForm() {
  this.submittedName = this.userName;
}

If the user types "Alice" and submits, what is submittedName?

medium

A. undefined

B. "" (empty string)

C. "Alice"

D. null

Solution

1. Step 1: Understand two-way binding effect

   The input field binds userName with two-way binding, so typing "Alice" updates userName to "Alice".

2. Step 2: Check submitForm behavior

   On submit, submitForm() sets submittedName to the current userName, which is "Alice".

3. Final Answer:

   "Alice" -> Option C

4. Quick Check:

   Two-way binding updates userName, submitForm copies it [OK]

Hint: Two-way binding updates property before submit [OK]

Common Mistakes:

• Assuming submittedName stays empty
• Confusing variable names
• Ignoring two-way binding effect

4. Identify the error in this Angular form submission code snippet:

<form (ngSubmit)="onSubmit">
  <input [(ngModel)]="email" name="email" required>
  <button type="submit">Send</button>
</form>

Component method:

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

medium

A. The (ngSubmit) should be (ngSubmit)="onSubmit()" with parentheses.

B. The input is missing a type attribute.

C. The button should have [disabled]="form.invalid".

D. The name attribute on input is not needed.

Solution

1. Step 1: Check (ngSubmit) syntax

   The (ngSubmit) directive requires a function call with parentheses to execute the method on submit.

2. Step 2: Identify the missing parentheses

   Using (ngSubmit)="onSubmit" passes the function reference but does not call it; it should be (ngSubmit)="onSubmit()".

3. Final Answer:

   The (ngSubmit) should be (ngSubmit)="onSubmit()" with parentheses. -> Option A

4. Quick Check:

   Call handler with () in (ngSubmit) [OK]

Hint: Always add () to call function in (ngSubmit) [OK]

Common Mistakes:

• Omitting parentheses in (ngSubmit)
• Ignoring required name attribute
• Thinking input type is mandatory for submission

5. You want to disable the submit button in an Angular form until all required fields are valid. Which approach correctly implements this behavior?

<form (ngSubmit)="submit()" #myForm="ngForm">
  <input name="email" [(ngModel)]="email" required>
  <input name="password" [(ngModel)]="password" required minlength="6">
  <button type="submit" ???>Submit</button>
</form>

What should replace ??? to disable the button when the form is invalid?

hard

A. [disabled]="email === '' || password.length < 6"

B. [disabled]="myForm.valid"

C. [disabled]="false"

D. [disabled]="myForm.invalid"

Solution

1. Step 1: Understand Angular form validity

   The template reference variable myForm exposes the form's validity state via myForm.invalid and myForm.valid.

2. Step 2: Use form invalid property to disable button

   Setting [disabled]="myForm.invalid" disables the submit button until the form is valid.

3. Final Answer:

   [disabled]="myForm.invalid" -> Option D

4. Quick Check:

   Disable button when form.invalid is true [OK]

Hint: Use form.invalid to disable submit button [OK]

Common Mistakes:

• Using negation incorrectly with valid property
• Manually checking fields instead of form state
• Setting disabled to false always