Skip to main content

Angular Form Submission

Forms are a critical part of web applications, allowing users to input data and interact with your application. In Angular, form submission is a structured process that involves capturing user input, validating it, and then processing the data. This guide will walk you through the essentials of handling form submissions in Angular.

Introduction to Angular Form Submission​

When working with Angular forms, the submission process involves capturing the form data when a user submits the form, validating that data, and then performing actions based on the submitted data. Angular provides robust tools for managing this process through both Template-driven forms and Reactive forms.

Form submission in Angular typically involves:

  1. Creating a form with input fields
  2. Adding validation
  3. Handling the submission event
  4. Processing the form data
  5. Providing feedback to the user

Let's explore each of these aspects in detail.

Setting Up a Basic Form​

Before diving into submission handling, let's create a simple form to work with. We'll use both Template-driven and Reactive approaches.

Template-Driven Form Example​

First, make sure you have FormsModule imported in your module:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, create a basic form in your component template:

html
<form #userForm="ngForm" (ngSubmit)="onSubmit(userForm)">
  <div class="form-group">
    <label for="name">Name</label>
    <input 
      type="text" 
      id="name" 
      name="name" 
      [(ngModel)]="user.name" 
      required 
      #name="ngModel">
    <div *ngIf="name.invalid && (name.dirty || name.touched)">
      <small class="error" *ngIf="name.errors?.['required']">Name is required</small>
    </div>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input 
      type="email" 
      id="email" 
      name="email" 
      [(ngModel)]="user.email" 
      required
      email
      #email="ngModel">
    <div *ngIf="email.invalid && (email.dirty || email.touched)">
      <small class="error" *ngIf="email.errors?.['required']">Email is required</small>
      <small class="error" *ngIf="email.errors?.['email']">Please enter a valid email</small>
    </div>
  </div>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

In your component:

typescript
import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-user-form',
  templateUrl: './user-form.component.html',
  styleUrls: ['./user-form.component.css']
})
export class UserFormComponent {
  user = {
    name: '',
    email: ''
  };

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Form submitted!');
      console.log(this.user); // The form data
      
      // Here you would typically send the data to your backend
      this.submitToServer(this.user);
      
      // Reset the form after submission
      form.resetForm();
    }
  }
  
  submitToServer(userData: any) {
    // This would be an HTTP request to your backend
    console.log('Sending data to server:', userData);
    // Example: this.http.post('/api/users', userData).subscribe(...);
  }
}

Reactive Form Example​

For Reactive forms, first import ReactiveFormsModule:

typescript
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Create a reactive form in your component:

html
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <div class="form-group">
    <label for="name">Name</label>
    <input type="text" id="name" formControlName="name">
    <div *ngIf="formControls.name.touched && formControls.name.errors">
      <small class="error" *ngIf="formControls.name.errors?.['required']">Name is required</small>
    </div>
  </div>
  
  <div class="form-group">
    <label for="email">Email</label>
    <input type="email" id="email" formControlName="email">
    <div *ngIf="formControls.email.touched && formControls.email.errors">
      <small class="error" *ngIf="formControls.email.errors?.['required']">Email is required</small>
      <small class="error" *ngIf="formControls.email.errors?.['email']">Please enter a valid email</small>
    </div>
  </div>
  
  <button type="submit" [disabled]="!userForm.valid">Submit</button>
</form>

In your component:

typescript
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({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]]
    });
  }
  
  // Getter for easy access to form controls in the template
  get formControls() {
    return this.userForm.controls;
  }
  
  onSubmit() {
    if (this.userForm.valid) {
      console.log('Form submitted!');
      console.log(this.userForm.value); // The form data
      
      // Here you would typically send the data to your backend
      this.submitToServer(this.userForm.value);
      
      // Reset the form after submission
      this.userForm.reset();
    } else {
      // Mark all fields as touched to trigger validation display
      Object.keys(this.formControls).forEach(key => {
        const control = this.formControls[key];
        control.markAsTouched();
      });
    }
  }
  
  submitToServer(userData: any) {
    // This would be an HTTP request to your backend
    console.log('Sending data to server:', userData);
    // Example: this.http.post('/api/users', userData).subscribe(...);
  }
}

Handling the Form Submission Event​

Angular provides the (ngSubmit) event directive to handle form submissions. This event is triggered when the form is submitted (usually by clicking a submit button or pressing Enter in a form field).

Key Points About ngSubmit:​

  1. It automatically prevents the default form submission behavior (page reload)
  2. It's available in both Template-driven and Reactive forms
  3. It triggers before the browser's form submit event

Validating Form Data​

Before submitting data to your backend, it's important to validate it. Angular provides both built-in validators and a mechanism for custom validators.

Built-in Validators​

Angular provides several built-in validators including:

  • required: Field must have a value
  • email: Field must be a valid email
  • minlength/maxlength: Field must be of a specific length
  • pattern: Field must match a specific regex pattern

Custom Form Validation​

For more specific validation needs, you can create custom validators.

Here's an example of a custom validator for a password confirmation field:

typescript
// Custom validator function
function matchingPasswords(group: FormGroup) {
  const password = group.get('password')?.value;
  const confirmPassword = group.get('confirmPassword')?.value;
  
  return password === confirmPassword ? null : { notMatching: true };
}

// In your component
ngOnInit() {
  this.userForm = this.fb.group({
    // Other fields...
    password: ['', [Validators.required, Validators.minLength(8)]],
    confirmPassword: ['', Validators.required]
  }, {
    validators: matchingPasswords
  });
}

Processing Form Data​

Once the form is submitted and validated, you'll want to process the data. This typically involves sending it to a backend API.

Making HTTP Requests​

Angular's HttpClient module is used to make API calls:

typescript
import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

submitToServer(userData: any) {
  const apiUrl = 'https://api.example.com/users';
  
  this.http.post(apiUrl, userData).subscribe({
    next: (response) => {
      console.log('Success!', response);
      // Handle success (e.g., show a success message)
      this.showSuccessMessage();
    },
    error: (error) => {
      console.error('Error submitting form', error);
      // Handle error (e.g., show an error message)
      this.showErrorMessage(error.message);
    }
  });
}

Handling Form Submission States​

It's important to provide feedback to users during the form submission process:

typescript
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { HttpClient } from '@angular/common/http';
import { finalize } from 'rxjs/operators';

@Component({
  selector: 'app-user-registration',
  template: `
    <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
      <!-- Form fields here -->
      
      <button 
        type="submit" 
        [disabled]="!registrationForm.valid || isSubmitting">
        {{ isSubmitting ? 'Submitting...' : 'Submit' }}
      </button>
      
      <div *ngIf="submitSuccess" class="success-message">
        Registration successful!
      </div>
      
      <div *ngIf="submitError" class="error-message">
        {{ submitError }}
      </div>
    </form>
  `
})
export class UserRegistrationComponent {
  registrationForm: FormGroup;
  isSubmitting = false;
  submitSuccess = false;
  submitError: string | null = null;
  
  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.registrationForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      // Other form controls
    });
  }
  
  onSubmit() {
    if (this.registrationForm.valid) {
      this.isSubmitting = true;
      this.submitSuccess = false;
      this.submitError = null;
      
      this.http.post('/api/register', this.registrationForm.value)
        .pipe(
          finalize(() => {
            this.isSubmitting = false;
          })
        )
        .subscribe({
          next: () => {
            this.submitSuccess = true;
            this.registrationForm.reset();
          },
          error: (error) => {
            this.submitError = error.message || 'Registration failed. Please try again.';
          }
        });
    }
  }
}

Real-world Example: User Registration Form​

Let's put everything together into a complete user registration form example:

typescript
// registration.component.ts
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { UserService } from '../services/user.service';

@Component({
  selector: 'app-registration',
  templateUrl: './registration.component.html',
  styleUrls: ['./registration.component.css']
})
export class RegistrationComponent implements OnInit {
  registrationForm!: FormGroup;
  isSubmitting = false;
  submitSuccess = false;
  submitError: string | null = null;
  
  constructor(
    private fb: FormBuilder,
    private userService: UserService
  ) {}
  
  ngOnInit() {
    this.registrationForm = this.fb.group({
      firstName: ['', [Validators.required]],
      lastName: ['', [Validators.required]],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [
        Validators.required,
        Validators.minLength(8),
        Validators.pattern(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)/)
      ]],
      confirmPassword: ['', [Validators.required]],
      agreeToTerms: [false, [Validators.requiredTrue]]
    }, {
      validators: this.passwordMatchValidator
    });
  }
  
  // Custom validator for password matching
  passwordMatchValidator(group: FormGroup) {
    const password = group.get('password')?.value;
    const confirmPassword = group.get('confirmPassword')?.value;
    
    return password === confirmPassword ? null : { passwordMismatch: true };
  }
  
  get f() {
    return this.registrationForm.controls;
  }
  
  onSubmit() {
    // Exit if form is invalid
    if (this.registrationForm.invalid) {
      // Mark all fields as touched to show validation errors
      Object.keys(this.f).forEach(key => {
        this.f[key].markAsTouched();
      });
      return;
    }
    
    this.isSubmitting = true;
    this.submitSuccess = false;
    this.submitError = null;
    
    // Extract user data (excluding confirmPassword and agreeToTerms)
    const userData = {
      firstName: this.f['firstName'].value,
      lastName: this.f['lastName'].value,
      email: this.f['email'].value,
      password: this.f['password'].value
    };
    
    this.userService.registerUser(userData).subscribe({
      next: () => {
        this.submitSuccess = true;
        this.registrationForm.reset();
      },
      error: (error) => {
        this.submitError = error.message || 'Registration failed. Please try again.';
      },
      complete: () => {
        this.isSubmitting = false;
      }
    });
  }
}
html
<!-- registration.component.html -->
<div class="registration-container">
  <h2>Create an Account</h2>
  
  <form [formGroup]="registrationForm" (ngSubmit)="onSubmit()">
    <!-- First Name -->
    <div class="form-group">
      <label for="firstName">First Name</label>
      <input type="text" id="firstName" formControlName="firstName">
      <div *ngIf="f['firstName'].touched && f['firstName'].errors" class="error">
        <span *ngIf="f['firstName'].errors['required']">First name is required</span>
      </div>
    </div>
    
    <!-- Last Name -->
    <div class="form-group">
      <label for="lastName">Last Name</label>
      <input type="text" id="lastName" formControlName="lastName">
      <div *ngIf="f['lastName'].touched && f['lastName'].errors" class="error">
        <span *ngIf="f['lastName'].errors['required']">Last name is required</span>
      </div>
    </div>
    
    <!-- Email -->
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" formControlName="email">
      <div *ngIf="f['email'].touched && f['email'].errors" class="error">
        <span *ngIf="f['email'].errors['required']">Email is required</span>
        <span *ngIf="f['email'].errors['email']">Please enter a valid email</span>
      </div>
    </div>
    
    <!-- Password -->
    <div class="form-group">
      <label for="password">Password</label>
      <input type="password" id="password" formControlName="password">
      <div *ngIf="f['password'].touched && f['password'].errors" class="error">
        <span *ngIf="f['password'].errors['required']">Password is required</span>
        <span *ngIf="f['password'].errors['minlength']">Password must be at least 8 characters</span>
        <span *ngIf="f['password'].errors['pattern']">
          Password must contain uppercase, lowercase, and number
        </span>
      </div>
    </div>
    
    <!-- Confirm Password -->
    <div class="form-group">
      <label for="confirmPassword">Confirm Password</label>
      <input type="password" id="confirmPassword" formControlName="confirmPassword">
      <div *ngIf="f['confirmPassword'].touched && f['confirmPassword'].errors" class="error">
        <span *ngIf="f['confirmPassword'].errors['required']">Please confirm your password</span>
      </div>
      <div *ngIf="registrationForm.errors?.['passwordMismatch'] && f['confirmPassword'].touched" class="error">
        <span>Passwords do not match</span>
      </div>
    </div>
    
    <!-- Terms and Conditions -->
    <div class="form-group checkbox">
      <label>
        <input type="checkbox" formControlName="agreeToTerms">
        I agree to the Terms and Conditions
      </label>
      <div *ngIf="f['agreeToTerms'].touched && f['agreeToTerms'].errors" class="error">
        <span *ngIf="f['agreeToTerms'].errors['requiredTrue']">
          You must agree to the Terms and Conditions
        </span>
      </div>
    </div>
    
    <!-- Submit Button -->
    <div class="form-group">
      <button 
        type="submit" 
        [disabled]="registrationForm.invalid || isSubmitting" 
        class="submit-btn">
        {{ isSubmitting ? 'Creating Account...' : 'Create Account' }}
      </button>
    </div>
    
    <!-- Success/Error Messages -->
    <div *ngIf="submitSuccess" class="success-message">
      Account created successfully! Please check your email to verify your account.
    </div>
    
    <div *ngIf="submitError" class="error-message">
      {{ submitError }}
    </div>
  </form>
</div>

And the corresponding service:

typescript
// user.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

interface UserData {
  firstName: string;
  lastName: string;
  email: string;
  password: string;
}

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'https://api.example.com/users';
  
  constructor(private http: HttpClient) {}
  
  registerUser(userData: UserData): Observable<any> {
    return this.http.post(`${this.apiUrl}/register`, userData);
  }
}

Best Practices for Angular Form Submission​

  1. Always validate forms both on the client and server sides.
  2. Disable the submit button when the form is invalid or while submitting.
  3. Provide clear feedback about validation errors and submission status.
  4. Reset the form after successful submission if appropriate.
  5. Handle errors gracefully by showing user-friendly error messages.
  6. Use loading indicators to show when a form is being processed.
  7. Implement proper error handling for HTTP requests.
  8. Consider implementing debounce for real-time validation to avoid too many validation checks.

Summary​

In this guide, we've covered all the essential aspects of handling form submissions in Angular:

  • Setting up basic forms using both Template-driven and Reactive approaches
  • Handling form submission events with ngSubmit
  • Validating form data with built-in and custom validators
  • Processing form data and making HTTP requests
  • Managing form submission states
  • A complete real-world example of a user registration form
  • Best practices for Angular form submissions

Mastering form submission handling is crucial for building interactive web applications. Angular provides robust tools for creating forms that are both user-friendly and secure.

Additional Resources​

Exercises​

  1. Create a login form with email and password fields, validation, and submission handling.
  2. Build a multi-step form wizard with validation at each step.
  3. Implement a dynamic form where fields can be added or removed by the user.
  4. Create a form with file upload functionality.
  5. Build a form with conditional fields that appear/disappear based on other field values.

By practicing these exercises, you'll develop a solid understanding of Angular form submission and related concepts.


If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)