Agent-Skills.md

Agent Skills: Forms

Build typed reactive forms with strict FormGroup typing, custom validators, and nonNullable controls in Angular. Use when implementing typed reactive forms, custom validators, or form control patterns. (triggers: FormBuilder, FormGroup, FormControl, Validators, reactive forms, typed forms)

UncategorizedID: hoangnguyen0403/agent-skills-standard/angular-forms

Repository

hoangnguyen0403/agent-skills-standard
HoangNguyen0403License: Apache-2.0
362103

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/angular/angular-forms

Skill Files

Browse the full folder contents for angular-forms.

Download Skill

Loading file tree…

skills/angular/angular-forms/SKILL.md

Skill Metadata

Name
angular-forms
Description
"Build typed reactive forms with strict FormGroup typing, custom validators, and nonNullable controls in Angular. Use when implementing typed reactive forms, custom validators, or form control patterns. (triggers: FormBuilder, FormGroup, FormControl, Validators, reactive forms, typed forms)"

Forms

Priority: P2 (MEDIUM)

1. Use Strictly Typed Reactive Forms

  • Always use Reactive Forms over Template-Driven for complex inputs.
  • Define typed FormGroup<T> with explicit control types — never use untyped FormGroup.

See typed forms for typed FormGroup examples.

2. Extract Validation Logic

  • Create standalone validator functions in a separate file.
  • Sync valueChanges to stores using takeUntilDestroyed().

See typed forms for standalone validator examples.

3. Ensure NonNullable Controls

  • Use fb.nonNullable.group(...) or nonNullable: true on individual controls.
  • This ensures form values are always strings — avoids null in form values.

Anti-Patterns

  • No Template-Driven Forms: Use Reactive Forms for any non-trivial inputs.
  • No untyped FormGroup: Always use strictly typed FormGroup<T>.
  • No validation in component: Extract into standalone validator functions.

References