canopy-forms-validation

Guide Angular Canopy form validation with LgValidationComponent and LgErrorStateMatcher.

23|46|Updated Sep 7, 2020

Search Tags:#validation #angular #forms #canopy #lgvalidationcomponent #lgerrorstatematcher #inline-errors

Ready to run

npx skills add https://github.com/Legal-and-General/canopy --skill canopy-forms-validation

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: canopy-forms-validation
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/forms-validation
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-forms-validation

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Inconsistent inline form errors and form-level validation across Canopy components in Angular projects, leading to a poor user experience and maintenance overhead.

Core Features & Use Cases

Guidance for using LgValidationComponent and LgErrorStateMatcher to consistently display inline validation messages.
Patterns for error state matching, accessible messaging, and form-level validation across multiple Canopy forms.
Real-world scenarios include login and signup forms, data entry workflows, and any form with required or minimum length constraints.

Quick Start

Apply the provided validation patterns to your Angular Canopy forms.

Frequently Asked Questions about canopy-forms-validation

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

FAQPage Schema

How do I implement consistent inline validation errors in Angular Canopy forms?▼

Apply LgValidationComponent for accessible inline messaging and LgErrorStateMatcher to match error states, ensuring consistent validation across Angular Canopy components.

What is the best way to handle form-level validation across multiple Canopy components?▼

Apply standardized patterns using LgErrorStateMatcher and LgValidationComponent to enforce form-level validation, covering required fields and minimum length constraints across Canopy components.

How do I display accessible validation messages for Angular forms with required constraints?▼

Use LgValidationComponent to render accessible inline error messages, addressing required fields and minimum length constraints directly within Angular form templates.

Does Canopy form validation support error state matching for data entry workflows?▼

Yes, Canopy supports error state matching for data entry workflows using LgErrorStateMatcher to detect invalid states and trigger inline errors consistently across forms.

Why are my inline form errors displaying inconsistently across different Canopy components?▼

Inline form errors display inconsistently across Canopy components when standard error state matching and accessible messaging patterns from LgValidationComponent are not applied uniformly.