Angular patterns — standalone components, signals, inject(), reactive forms, HTTP interceptors, and new control flow
95
94%
Does it follow best practices?
Impact
99%
2.75xAverage score across 4 eval scenarios
Passed
No known issues
{
"context": "Tests whether the agent proactively applies Angular best practices when building a form. The task describes only business requirements -- it says nothing about reactive forms vs template-driven forms, accessibility attributes, standalone components, or OnPush. The agent should choose the right patterns on its own.",
"type": "weighted_checklist",
"checklist": [
{
"name": "Reactive forms used",
"description": "The component uses ReactiveFormsModule with FormGroup and FormControl, NOT template-driven forms with ngModel/FormsModule.",
"max_score": 14
},
{
"name": "Validators applied",
"description": "FormControls include appropriate validators (Validators.required on required fields, Validators.min or Validators.pattern for amount, Validators.maxLength for description).",
"max_score": 10
},
{
"name": "Form validity check on submit",
"description": "The onSubmit method checks form.valid before processing, guarding against invalid submissions.",
"max_score": 8
},
{
"name": "Standalone component",
"description": "The component uses standalone: true and imports ReactiveFormsModule in its own imports array, not via an NgModule.",
"max_score": 10
},
{
"name": "OnPush change detection",
"description": "The component uses changeDetection: ChangeDetectionStrategy.OnPush.",
"max_score": 8
},
{
"name": "aria-required on required inputs",
"description": "Required input fields have aria-required=\"true\" for screen reader accessibility. The agent was NOT asked about accessibility.",
"max_score": 12
},
{
"name": "aria-invalid binding",
"description": "Inputs bind [attr.aria-invalid] to the control's invalid and touched state so screen readers can announce invalid fields.",
"max_score": 12
},
{
"name": "role=alert on error messages",
"description": "Inline validation error messages use role=\"alert\" so screen readers announce them when they appear.",
"max_score": 10
},
{
"name": "Label-input association",
"description": "Each input has a <label> element with a for attribute matching the input's id, providing proper label association.",
"max_score": 8
},
{
"name": "New control flow for error display",
"description": "Error messages use @if syntax instead of *ngIf structural directive.",
"max_score": 8
}
]
}