HomeChallengesRepsProblemsLeaderboardTake a challenge

Login Form

A reactive login form with real validation, visible errors, and a button that cannot be pressed twice.

Intermediate20 min on the clock6 graded checks · 100 pointsAngular Sprint
Graded by reading your code against the checklist below.

What you build

  • A standalone component that imports ReactiveFormsModule
  • Build the form with FormBuilder, typed with nonNullable
  • email: required and a valid address. password: required, at least 8 characters
  • Show the error under the field it belongs to
  • Disable the button while the submit is in flight

Done means

Submitting empty shows a message per field, and the button disables while it runs.

How it is graded

Published in full, before you start — every point is one of these and there is nothing else.

  1. A standalone component that imports what it needs+15Standalone components and inject()
  2. Build the form with FormBuilder+20Reactive forms
  3. Apply the validation rules+20Reactive forms
  4. Show each error under its own field+20Angular control flow
  5. Disable the button while it submits+15Loading and error states
  6. Type the form+10TypeScript basics

What it teaches

Standalone components and inject()intermediate

Standalone components declare what they need instead of belonging to an NgModule, and inject() gets a dependency without a constructor parameter — together they are most of what changed in modern Angular.

The rest of Angular Sprint