Angular Forms: Submit with HttpClient

Submit an Angular reactive form to a Formboost endpoint with HttpClient: FormGroup validation, the 202 response, error handling, no backend of your own.

Angular's ReactiveFormsModule and HttpClient pair naturally with Formboost. Build your form in Angular, submit it to your Formboost endpoint, and let Formboost handle storage, spam filtering, and notifications.

Prerequisites

A Formboost account (sign up free)
An Angular project (v15+)

Step 1: Create a Formboost Endpoint

https://formboost.app/f/YOUR_ENDPOINT_ID

Step 2: Enable HttpClient

In your app.config.ts (standalone) or AppModule:

// app.config.ts (standalone)
import { provideHttpClient } from "@angular/common/http";

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

Step 3: Create the Contact Component

// contact.component.ts
import { Component } from "@angular/core";
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from "@angular/forms";
import { HttpClient } from "@angular/common/http";
import { CommonModule } from "@angular/common";

@Component({
  selector: "app-contact",
  standalone: true,
  imports: [ReactiveFormsModule, CommonModule],
  template: `
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div>
        <label for="name">Name</label>
        <input id="name" type="text" formControlName="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" type="email" formControlName="email" />
      </div>
      <div>
        <label for="message">Message</label>
        <textarea id="message" formControlName="message" rows="5"></textarea>
      </div>
      <button type="submit" [disabled]="form.invalid || submitting">
        {{ submitting ? "Sending…" : "Send" }}
      </button>
      <p *ngIf="success">Message sent successfully!</p>
    </form>
  `,
})
export class ContactComponent {
  form: FormGroup;
  submitting = false;
  success = false;

  private endpoint = "https://formboost.app/f/YOUR_ENDPOINT_ID";

  constructor(private fb: FormBuilder, private http: HttpClient) {
    this.form = this.fb.group({
      name: ["", Validators.required],
      email: ["", [Validators.required, Validators.email]],
      message: [""],
    });
  }

  onSubmit() {
    if (this.form.invalid) return;
    this.submitting = true;

    this.http.post(this.endpoint, this.form.value).subscribe({
      next: () => {
        this.success = true;
        this.form.reset();
        this.submitting = false;
      },
      error: () => {
        this.submitting = false;
      },
    });
  }
}

Replace YOUR_ENDPOINT_ID with your actual endpoint ID.

Step 4: Add the Component to a Page

// app.component.ts or any route component
import { ContactComponent } from "./contact/contact.component";

@Component({
  imports: [ContactComponent],
  template: `<app-contact />`,
})
export class AppComponent {}

Step 5: Test It

Run ng serve and submit the form. The submission will appear in your Formboost dashboard within seconds.