Build an Angular contact form with Reactive Forms and HttpClient

import { Component, inject, signal } from "@angular/core";
import { HttpClient } from "@angular/common/http";
import { FormBuilder, ReactiveFormsModule, Validators } from "@angular/forms";

@Component({
  selector: "app-contact",
  imports: [ReactiveFormsModule],
  templateUrl: "./contact.component.html",
})
export class ContactComponent {
  private http = inject(HttpClient);
  status = signal<"idle" | "sending" | "sent" | "error">("idle");

  form = inject(FormBuilder).nonNullable.group({
    name: ["", Validators.required],
    email: ["", [Validators.required, Validators.email]],
    message: ["", Validators.required],
  });

  submit() {
    if (this.form.invalid) return;
    this.status.set("sending");
    this.http
      .post("https://formthunder.com/submit", { ...this.form.getRawValue(), access_key: "YOUR_ACCESS_KEY" })
      .subscribe({
        next: () => {
          this.status.set("sent");
          this.form.reset();
        },
        error: () => this.status.set("error"),
      });
  }
}

<form [formGroup]="form" (ngSubmit)="submit()">
  <label>Name <input formControlName="name" /></label>
  <label>Email <input formControlName="email" type="email" /></label>
  <label>Message <textarea formControlName="message"></textarea></label>
  <button [disabled]="status() === 'sending'">Send</button>
  @if (status() === 'sent') { <p role="status">Thanks, we got your message.</p> }
  @if (status() === 'error') { <p role="alert">That didn't send. Please try again.</p> }
</form>

import { provideHttpClient, withFetch } from "@angular/common/http";

export const appConfig = { providers: [provideHttpClient(withFetch())] };