# 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.

- Skill: `hoangnguyen0403/angular-forms` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds add hoangnguyen0403/angular-forms`
- Raw SKILL.md: https://api.skillmd.com/api/skills/hoangnguyen0403/angular-forms/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: HoangNguyen0403 (https://skillmd.com/u/hoangnguyen0403)
- Updated: 2026-08-19
- Page: https://skillmd.com/skills/hoangnguyen0403/angular-forms

---

# Forms

## **Priority: P2 (MEDIUM)**

## 1. Use Strictly Typed Reactive Forms

- Prefer Reactive Forms to Template-Driven for complex inputs.
- Define typed `FormGroup<T>` with explicit control types — never use untyped FormGroup.

See [typed forms](references/typed-forms.md) for typed FormGroup examples.

## 2. Extract Validation Logic

- Create standalone validator functions in separate file.
- Name the validator module as a separate file (for example, `validators.ts`) in the response and keep validation out of the component class.
- Sync `valueChanges` to stores using `takeUntilDestroyed()`.

See [typed forms](references/typed-forms.md) for standalone validator examples.

## 3. Ensure NonNullable Controls

- Use `fb.nonNullable.group(...)` or `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](references/typed-forms.md)

## Canonical response anchors

- Additional task-grounded exact anchors: separate file