feat: Add native Angular forms validation support with conditional error messages

[Copilot]

This PR implements native Angular reactive and template-driven forms validation support for DB-UX input components, enabling developers to use conditional validation messages that automatically show/hide based on FormControl validation state.

Problem

Previously, DB-UX input components only supported standard HTML validation attributes (required, min/max, etc.) and ignored Angular FormControl validators. Developers had to implement custom validation message handling, missing out on Angular's powerful validation ecosystem and DB-UX's built-in validation styling.

Solution

Enhanced Input Component

• Added Angular NgControl injection to access FormControl validation state
• Implemented getFormControlErrors() and hasFormControlError(errorType) methods
• Enhanced existing handleValidation() to check both HTML and Angular validation errors
• Maintains backward compatibility with existing validation attributes

Enhanced Infotext Component

• Added error property for conditional display based on specific validation errors
• Implemented shouldShow() logic that checks parent input's FormControl state
• Added parent component injection to access validation context

Usage Pattern

The implementation enables the exact usage pattern requested in the issue:

<db-input formControlName="username" label="Username">
    <db-infotext error="required">Username is required</db-infotext>
    <db-infotext error="minlength">Username must be at least 3 characters</db-infotext>
    <db-infotext error="maxlength">Username cannot exceed 100 characters</db-infotext>
    <db-infotext error="usernameTaken">This username is already taken</db-infotext>
</db-input>

Form Setup

validationForm = new FormGroup({
    username: new FormControl('', [
        Validators.required,
        Validators.minLength(3), 
        Validators.maxLength(100),
        this.customUsernameValidator
    ])
});

Key Features

• Multiple validation messages per component: Each db-infotext with an error attribute conditionally displays based on FormControl errors
• Built-in validator support: Works with Validators.required, Validators.email, Validators.minLength, etc.
• Custom validator support: Supports any custom validator error keys
• Automatic show/hide: Messages appear/disappear as validation state changes
• Existing styling: Leverages DB-UX semantic styling (semantic="critical" for errors)
• Backward compatible: Existing HTML validation and manual validation properties continue working

Implementation Details

The solution uses Angular's post-build transformation system to inject FormControl integration without affecting other framework outputs (React, Vue, Stencil). The core Mitosis components remain framework-agnostic while Angular gets enhanced validation capabilities.

Documentation

Updated Angular documentation with comprehensive examples showing:

• Basic reactive forms integration
• Validation setup with multiple validators
• Conditional error message patterns
• Custom validator examples

Fixes #3948.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 7287c1b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR