{
  "instruction": "Use ReactiveFormsModule with FormGroup/FormControl and validators. Include full accessibility: aria-required, aria-invalid bound to touched state, role=alert on errors, label/id pairs.",
  "relevant_when": "Agent creates forms, user input, registration, or data entry components in Angular",
  "context": "Angular forms must use ReactiveFormsModule (imported in the standalone component's imports array), FormGroup with FormControl and Validators. Error messages must be gated on invalid AND touched. Accessibility: aria-required on required inputs, [attr.aria-invalid] bound to invalid && touched, role='alert' on error messages, <label for> matching input id. Submit button disabled when form invalid. onSubmit() must guard with form.valid check.",
  "sources": [
    {
      "type": "file",
      "filename": "skills/angular-best-practices/SKILL.md",
      "tile": "tessl-labs/angular-best-practices@0.1.4"
    }
  ],
  "checklist": [
    {
      "name": "reactive-forms-module",
      "rule": "Agent imports ReactiveFormsModule in the component's imports array and uses FormGroup/FormControl, not template-driven forms",
      "relevant_when": "Agent creates form components in Angular"
    },
    {
      "name": "accessibility-attributes",
      "rule": "Agent adds aria-required, [attr.aria-invalid] bound to touched state, role=alert on errors, and label/id pairs",
      "relevant_when": "Agent creates form inputs or error messages in Angular templates"
    },
    {
      "name": "touched-gated-errors",
      "rule": "Agent shows validation errors only when the control is both invalid AND touched",
      "relevant_when": "Agent displays form validation errors in Angular"
    },
    {
      "name": "form-submit-guard",
      "rule": "Agent checks form.valid in onSubmit() and disables submit button when form is invalid",
      "relevant_when": "Agent implements form submission in Angular"
    }
  ]
}