Create a Signup Form Using Reactive Forms in Angular

In this tutorial, you will learn how to build a complete signup form using Reactive Forms in Angular. Reactive Forms give you strong control over validation, form structure, and state management. They are the preferred choice for scalable and testable form logic.

This guide shows how to:

• Create a signup form
• Apply validation rules
• Create a custom password match validator
• Display validation errors
• Submit the form safely

---

Step 1: Import ReactiveFormsModule

You must import ReactiveFormsModule in your application 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],
  bootstrap: [AppComponent]
})
export class AppModule {}

---

Step 2: Create Signup Component

Generate a component to hold your signup form.

ng generate component signup

---

Step 3: Build Form in Component Using FormBuilder

Define fields and validations.

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

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html'
})
export class SignupComponent {
  signupForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.signupForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      password: ['', [Validators.required, Validators.minLength(6)]],
      confirmPassword: ['', Validators.required]
    }, {
      validators: this.matchPasswords
    });
  }

  matchPasswords(form: FormGroup) {
    const pass = form.get('password')?.value;
    const confirm = form.get('confirmPassword')?.value;

    if (pass !== confirm) {
      form.get('confirmPassword')?.setErrors({ mismatch: true });
    }
  }

  submit() {
    if (this.signupForm.valid) {
      console.log('Signup Data:', this.signupForm.value);
    }
  }
}

---

Step 4: Create the HTML Form Template

Bind the form and show validation errors.

<form [formGroup]="signupForm" (ngSubmit)="submit()">

  <label>Name</label>
  <input type="text" formControlName="name">
  <div *ngIf="signupForm.controls.name.touched && signupForm.controls.name.errors?.required">
    Name is required
  </div>

  <label>Email</label>
  <input type="email" formControlName="email">
  <div *ngIf="signupForm.controls.email.errors?.required">
    Email is required
  </div>
  <div *ngIf="signupForm.controls.email.errors?.email">
    Enter a valid email
  </div>

  <label>Password</label>
  <input type="password" formControlName="password">
  <div *ngIf="signupForm.controls.password.errors?.required">
    Password is required
  </div>
  <div *ngIf="signupForm.controls.password.errors?.minlength">
    Password must be at least 6 characters
  </div>

  <label>Confirm Password</label>
  <input type="password" formControlName="confirmPassword">
  <div *ngIf="signupForm.controls.confirmPassword.errors?.required">
    Confirm password is required
  </div>
  <div *ngIf="signupForm.controls.confirmPassword.errors?.mismatch">
    Passwords do not match
  </div>

  <button type="submit" [disabled]="signupForm.invalid">Signup</button>
</form>

---

Step 5: Optional Styling

You can style the form to make it cleaner.

input {
  display: block;
  margin-bottom: 10px;
}
label {
  font-weight: bold;
}
div {
  color: red;
  font-size: 12px;
}
button {
  margin-top: 10px;
}

---

Summary

You now have a working signup form using Reactive Forms. You learned how to:

• Build forms using FormGroup and FormBuilder
• Add validation rules
• Implement a password match validator
• Display validation messages cleanly

This pattern is ideal for login, registration, profile update, and other forms with strict validation control.

Happy coding! 🚀