CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl-labs/angular-best-practices

Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow

95

2.75x
Quality

94%

Does it follow best practices?

Impact

99%

2.75x

Average score across 4 eval scenarios

SecuritybySnyk

Passed

No known issues

Overview
Quality
Evals
Security
Files

task.mdevals/scenario-2/

Expense Submission Form

Build an expense submission form in Angular. The form collects the following fields:

  • Date (required) -- when the expense occurred
  • Amount (required) -- a positive number with two decimal places
  • Category (required) -- a dropdown with options: Travel, Meals, Supplies, Software, Other
  • Description (optional) -- a textarea, max 500 characters

Display inline validation messages when a field is invalid after the user has interacted with it. The submit button should be disabled until the form is valid. On submission, log the form value to the console.

Output

Produce TypeScript files in a src/app/ directory:

  • src/app/expenses/expense.model.ts -- TypeScript type definitions
  • src/app/expenses/expense-form.component.ts -- the form component

Do not include test files or build configuration.

evals

tile.json