Agent-skills-standard angular-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)

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/angular/angular-forms" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-angular-forms && rm -rf "$T"

manifest: skills/angular/angular-forms/SKILL.md

source content

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 separate file.
Sync
```
valueChanges
```
to stores using
```
takeUntilDestroyed()
```
.

See typed forms for standalone validator examples.

3. Ensure NonNullable Controls

Use

fb.nonNullable.group(...)

nonNullable: true

on individual controls.

This ensures form values 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

Typed Forms