Form Submission in Reactive Forms in Angular

Forms are a fundamental part of web applications, allowing users to input data, submit information, and interact with the application. Angular provides a robust way to manage forms using Reactive Forms, which offer a model-driven approach to handling form inputs, validations, and submission logic.

This article explains in detail how to handle form submission using Reactive Forms in Angular, including validation, dynamic form controls, error handling, and advanced patterns.

Introduction to Reactive Forms

Angular offers two ways to handle forms:

1. Template-driven forms: Easier to use, relies heavily on directives in the template.
2. Reactive forms: Model-driven, more scalable, provides fine-grained control over validation and data handling.

Reactive forms are created and managed entirely in the component class using FormGroup, FormControl, and FormBuilder. This makes them ideal for complex forms that require dynamic controls and advanced validations.

---

Setting Up Reactive Forms

To use reactive forms, you need to import the ReactiveFormsModule in your Angular module.

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],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• ReactiveFormsModule provides all the tools needed for reactive form creation and management.

---

Creating a Basic Reactive Form

A reactive form typically consists of a FormGroup with FormControl instances for each input field.

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

@Component({
  selector: 'app-user-form',
  template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <label>Name:</label>
  <input formControlName="name">
  
  <label>Email:</label>
  <input formControlName="email">
  
  <button type="submit">Submit</button>
</form>
  `
})
export class UserFormComponent {
  userForm = new FormGroup({
name: new FormControl(''),
email: new FormControl('')
  });

  onSubmit() {
if (this.userForm.valid) {
  console.log(this.userForm.value);
} else {
  console.log('Form is invalid');
}
  }
}

• formGroup binds the form in the template to the FormGroup instance in the component.
• formControlName links each input field to a FormControl.
• onSubmit() checks the validity before processing form data.

---

Validating Reactive Forms

Validation is a critical aspect of form submission. Angular provides built-in validators like Validators.required, Validators.minLength, Validators.email, and allows custom validators.

Adding Validators

import { Validators } from '@angular/forms';

userForm = new FormGroup({
  name: new FormControl('', [Validators.required, Validators.minLength(3)]),
  email: new FormControl('', [Validators.required, Validators.email])
});

Displaying Validation Errors

<div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
  Name is required and must be at least 3 characters.
</div>

<div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
  Enter a valid email address.
</div>

• Use .touched to show errors only after the user interacts with the field.
• Reactive forms make it easy to combine multiple validators on a single field.

---

Handling Form Submission

The onSubmit() method is the primary function executed when the form is submitted.

onSubmit() {
  if (this.userForm.valid) {
console.log('Form Submitted:', this.userForm.value);
// Further processing like sending data to a server
  } else {
console.log('Form is invalid');
this.markAllAsTouched();
  }
}

markAllAsTouched() {
  Object.values(this.userForm.controls).forEach(control => {
control.markAsTouched();
  });
}

• Always check userForm.valid before processing.
• Mark all controls as touched to show validation errors if the form is invalid.

---

Dynamic Form Controls

Reactive forms support dynamic addition and removal of form controls using FormArray.

Example: Dynamic Skills Form

import { FormArray, FormBuilder } from '@angular/forms';

constructor(private fb: FormBuilder) {}

userForm = this.fb.group({
  name: ['', Validators.required],
  skills: this.fb.array([])
});

get skills() {
  return this.userForm.get('skills') as FormArray;
}

addSkill() {
  this.skills.push(this.fb.control(''));
}

removeSkill(index: number) {
  this.skills.removeAt(index);
}

<div formArrayName="skills">
  <div *ngFor="let skill of skills.controls; let i = index">
&lt;input &#91;formControlName]="i"&gt;
&lt;button type="button" (click)="removeSkill(i)"&gt;Remove&lt;/button&gt;
  </div>
</div>
<button type="button" (click)="addSkill()">Add Skill</button>

• FormArray allows handling arrays of form controls dynamically.
• Useful for forms like surveys, questionnaires, and multi-input sections.

---

Custom Validators

Sometimes, built-in validators are not enough. Angular allows creating custom validators.

Example: Password Match Validator

import { AbstractControl, ValidatorFn } from '@angular/forms';

export function passwordMatchValidator(password: string, confirmPassword: string): ValidatorFn {
  return (control: AbstractControl) => {
const pw = control.get(password)?.value;
const cpw = control.get(confirmPassword)?.value;
return pw === cpw ? null : { passwordMismatch: true };
  };
}

userForm = this.fb.group({
  password: ['', Validators.required],
  confirmPassword: ['', Validators.required]
}, { validators: passwordMatchValidator('password', 'confirmPassword') });

• Apply the validator at the FormGroup level.
• Returns null if valid, or an error object if invalid.

---

Reactive Forms with Nested Groups

Forms can contain nested groups for structured data.

userForm = this.fb.group({
  name: ['', Validators.required],
  contact: this.fb.group({
email: ['', [Validators.required, Validators.email]],
phone: ['']
  })
});

<div formGroupName="contact">
  <input formControlName="email" placeholder="Email">
  <input formControlName="phone" placeholder="Phone">
</div>

• Nested FormGroup allows grouping related controls.
• Improves readability and maintainability of complex forms.

---

Submitting Data to a Server

Reactive forms make it easy to retrieve form data and send it to a backend service.

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

constructor(private http: HttpClient) {}

onSubmit() {
  if (this.userForm.valid) {
this.http.post('https://api.example.com/users', this.userForm.value)
  .subscribe(response => {
    console.log('Data submitted successfully', response);
  }, error => {
    console.log('Error submitting form', error);
  });
  }
}

• userForm.value contains all form data in a structured object.
• Can integrate with Angular services for API communication.

---

Reactive Form Best Practices

1. Always Check Form Validity: Use userForm.valid before processing.
2. Use Validators: Built-in or custom, ensure proper validation.
3. Mark Controls as Touched: Display errors when submission fails.
4. Use FormBuilder: Simplifies FormGroup and FormControl creation.
5. Handle Dynamic Forms: Use FormArray for lists and repeatable sections.
6. Separate Logic: Keep submission logic in the component, validation logic in services if needed.
7. Use Nested Groups: Organize complex forms with FormGroup inside FormGroup.

---

Complete Example

import { Component } from '@angular/core';
import { FormBuilder, Validators, FormArray } from '@angular/forms';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-user-form',
  template: `
<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <input formControlName="name" placeholder="Name">
  <div *ngIf="userForm.get('name')?.invalid && userForm.get('name')?.touched">
    Name is required.
  </div>
  <input formControlName="email" placeholder="Email">
  <div *ngIf="userForm.get('email')?.invalid && userForm.get('email')?.touched">
    Enter a valid email.
  </div>
  <div formArrayName="skills">
    <div *ngFor="let skill of skills.controls; let i=index">
      <input [formControlName]="i">
      <button type="button" (click)="removeSkill(i)">Remove</button>
    </div>
  </div>
  <button type="button" (click)="addSkill()">Add Skill</button>
  <button type="submit">Submit</button>
</form>
  `
})
export class UserFormComponent {
  userForm = this.fb.group({
name: ['', Validators.required],
email: ['', [Validators.required, Validators.email]],
skills: this.fb.array([])
  });

  constructor(private fb: FormBuilder, private http: HttpClient) {}

  get skills() {
return this.userForm.get('skills') as FormArray;
  }

  addSkill() {
this.skills.push(this.fb.control(''));
  }

  removeSkill(index: number) {
this.skills.removeAt(index);
  }

  onSubmit() {
if (this.userForm.valid) {
  console.log('Form Data:', this.userForm.value);
  this.http.post('https://api.example.com/users', this.userForm.value).subscribe();
} else {
  console.log('Form is invalid');
  this.markAllAsTouched();
}
  }

  markAllAsTouched() {
Object.values(this.userForm.controls).forEach(control => {
  if (control instanceof FormArray) {
    control.controls.forEach(c => c.markAsTouched());
  } else {
    control.markAsTouched();
  }
});
  }
}

• Demonstrates form submission, validation, dynamic controls, and sending data to a backend API.