Premium

Contact Form (Standalone Component + HTTP)

By FrontendAtlas Team · Updated Jan 30, 2026

Build a contact form using an Angular standalone component and reactive forms. You will only work in src/app/app.component.ts – the HTML, CSS, and bootstrapping are already set up. On submit, validate the input and send the form data with a POST request to a fake…

Work only inside the standalone root component in src/app/app.component.ts (template and styles…
Build/configure a reactive form with fields for name, email, and message.

What you’ll build / What this tests

This premium angular coding focuses on Contact Form (Standalone Component + HTTP). You’ll apply forms and http thinking with intermediate level constraints. The prompt emphasizes Build a contact form using an Angular standalone component and reactive forms. You will only work….

Learning goals

Translate the prompt into a clear angular API signature and return shape.
Apply forms, http, validation techniques to implement contact form (standalone component + http).
Handle intermediate edge cases without sacrificing readability.
Reason about time/space complexity and trade-offs in angular.

Key decisions to discuss

Define the exact input/output contract before coding.
Decide on concurrency and error propagation behavior.
Prioritize predictable edge-case handling over micro-optimizations.

Evaluation rubric

Correctness: covers required behaviors and edge cases.
Clarity: readable structure and predictable control flow.
Complexity: avoids unnecessary work for large inputs.
API discipline: no mutation of inputs; returns expected shape.
Testability: solution is easy to unit test.

Constraints / Requirements

Work only inside the standalone root component in src/app/app.component.ts (template and styles are already provided).
Build/configure a reactive form with fields for name, email, and message.
Make all fields required; validate email with a basic email validator.
Disable the submit button while the form is invalid or while a request is in progress.
On valid submit, send a POST request with the form body to https://jsonplaceholder.typicode.com/posts using HttpClient.
If the request succeeds, set successMessage to "Your message has been sent. Thank you!".
If the request fails, set errorMessage to "Something went wrong. Please try again.".
Track an isSubmitting flag so the user cannot trigger multiple requests at the same time.
Initially, the submit button is disabled until the form becomes valid (all required fields filled and email valid).
If the user attempts to submit invalid data, all controls are marked as touched and validation error messages…

Mini snippet (usage only)

// Example usage
const input = /* contact form (standalone component + http) input */;
const result = solve(input);
console.log(result);

// Edge case check
const empty = input ?? null;
const fallback = solve(input);
console.log(fallback);

// Expected: describe output shape, not the implementation
// (no solution code in preview)

Common pitfalls

Mutating inputs instead of returning a new value.
Skipping edge cases like empty input, duplicates, or nulls.
Overlooking time complexity for large inputs.