angular-awesome-forms

Integrate Web Awesome controls with Angular Forms via ngModel or FormGroup.

2|1|Updated Jun 4, 2025
One-click install
npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-forms
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: angular-awesome-forms
Source: https://github.com/GedMarc/angular-awesome/tree/main/skills/angular-awesome-forms
Command: npx skills add https://github.com/GedMarc/angular-awesome --skill angular-awesome-forms

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies integrating Web Awesome form controls into Angular applications by providing clear guidance, examples, and patterns for using wa- components with template-driven and reactive Angular Forms, removing ambiguity around bindings and validation.

Core Features & Use Cases

  • Form Control Compatibility: Covers wa-input, wa-select, wa-checkbox, wa-switch, wa-slider, wa-textarea, wa-combobox, wa-color-picker, wa-number-input, wa-radio, and wa-file-input with their value types and selectors.
  • Reactive & Template-Driven Support: Shows how to use [(ngModel)], FormControl, and FormGroup, including validation, disabled state management, multi-select values, and handling wa-input and wa-change events.
  • Use Case: Build profile, settings, and data-entry forms that leverage Web Awesome UI while preserving Angular's form behaviors and type safety.

Quick Start

Use angular-awesome-forms to wire wa-input and wa-select to a FormGroup and submit the form using Angular's reactive form APIs.

Frequently Asked Questions about angular-awesome-forms

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I bind Web Awesome form controls to Angular reactive forms?

To bind Web Awesome form controls to Angular reactive forms, you use ControlValueAccessor compatibility to connect wa-input and wa-select components directly to FormControl and FormGroup instances for reliable value syncing.

Can I use ngModel with Web Awesome components in template-driven Angular forms?

Yes, you can use [(ngModel)] with Web Awesome components in template-driven Angular forms because the integration ensures ControlValueAccessor compatibility, allowing wa-checkbox and wa-switch to support standard two-way data binding.

Does Web Awesome support Angular form validation states and disabled field handling?

Web Awesome supports Angular form validation states and disabled field handling by mapping wa-input and wa-change events to FormControl states, ensuring multi-select values and disabled properties integrate natively with Angular's form workflows.

What is the best way to integrate wa-select and wa-combobox into an Angular FormGroup?

The best way to integrate wa-select and wa-combobox into an Angular FormGroup is by leveraging native ControlValueAccessor compatibility, which handles multi-select values and validation states automatically without manual event listeners.

Why does my Web Awesome wa-slider not update its Angular FormControl value?

If your Web Awesome wa-slider does not update its Angular FormControl value, ensure you are properly utilizing the ControlValueAccessor integration and handling wa-input or wa-change events to sync the component's value with the FormGroup.

Do I need a custom ControlValueAccessor for Web Awesome wa-textarea in Angular?

You do not need a custom ControlValueAccessor for Web Awesome wa-textarea in Angular because the integration provides native binding support, ensuring wa-input and wa-change events correctly update FormControl and ngModel values.