Forms & Input Validation

Relevant source files

The following files were used as context for generating this wiki page:

• sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts
• sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.html
• best-practices.md
• sunrise-angular/src/app/pages/contact/contact.component.html
• sunrise-angular/src/app/shared/components/requirement-estimator/requirement-estimator.component.ts
• implementation_plan.md

The Forms and Input Validation system manages user interactions and data integrity for lead generation and service inquiries. This system uses Angular's Reactive Forms to collect technical requirements for security installations, audit requests, and general contact messages.

The system ensures that user-provided data meets specific technical formats before submission. Valid data triggers workflows including EmailJS integration and dynamic WhatsApp message generation for instant communication.
Sources: best-practices.md, implementation_plan.md, sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts:31-50

Form Architecture & Components

The project implements two primary form patterns: standard Reactive Forms for structured data collection and Signal-based state for interactive estimators.

Society Audit Form

The SocietyAuditFormComponent serves as a complex data collection tool for housing societies. It captures premise details, scale of operations (flat and wing counts), and technical needs through a structured FormGroup.
Sources: sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts:16-50

Interaction Flow

The following diagram illustrates the lifecycle of a form submission from input to external service triggers.

Validation Implementation

Validation logic utilizes Angular's built-in Validators and custom regular expressions to enforce data quality.

Validation Rules Summary

Field	Constraint	Implementation
Society Name	Required	Validators.required
Phone	Required, Pattern	Validators.pattern(/^[0-9+\s-]{8,15}$/)
Flat/Wing Count	Required, Min Value	Validators.min(1)
Email (General Form)	Required, Email Format	Validators.required, Validators.email
Sources: sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts:32-49, sunrise-angular/src/app/pages/contact/contact.component.html:103-120

Visual Feedback

Templates use conditional CSS class bindings to indicate invalid states. Form controls display the .is-invalid class when the field is invalid and has been interacted with (touched).
Sources: sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.html:16-18

Signal-Based Form State

Newer components and the project roadmap prioritize Angular Signals for state management within forms and interactive tools.

Interactive Estimator Logic

The RequirementEstimatorComponent uses signals to track user selections for premise types and hardware needs. It uses computed signals to derive technical recommendations and bill-of-quantities (BOQ) text dynamically as the user modifies inputs.
Sources: sunrise-angular/src/app/shared/components/requirement-estimator/requirement-estimator.component.ts:20-65

Signal Architecture

Data Submission Workflows

Validated form data initiates two distinct submission paths: asynchronous API calls and deep-linking to messaging platforms.

EmailJS Integration

The system uses the @emailjs/browser library to transmit form data. Upon valid submission, the onSubmit method captures the current form value and maps it to template parameters defined in the environment configuration.
Sources: sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts:98-112

WhatsApp Lead Generation

The project generates pre-filled WhatsApp messages using the generateBoqSummary logic. This converts form state into a human-readable Markdown string for immediate inquiry.

// Example Summary Generation Logic
generateBoqSummary(formVal?: any): string {
  const v = formVal || this.auditForm.value;
  return [
    `*Sunrise Communication Site Audit Request*`,
    `🏢 Premise: ${v.societyName}`,
    `📍 Location: ${v.locality}`,
    `⚙️ Scope: ${services.join(', ')}`
  ].join('\n');
}

Sources: sunrise-angular/src/app/shared/components/society-audit-form/society-audit-form.component.ts:52-72

Best Practices & Standards

Form development follows specific project-wide architectural constraints:

• Reactive vs Template-driven: Reactive forms are preferred for complex validation logic.
• Signal Forms: Project standards recommend moving toward @angular/forms/signals for type-safe field access and schema-based validation in newer modules.
• Accessibility: Form templates must use proper label associations and ARIA attributes to meet WCAG AA standards.
• Styling: Templates avoid ngClass and ngStyle in favor of standard Angular class and style bindings.
  Sources: best-practices.md

The Forms and Input Validation system provides a robust bridge between user requirements and technical service fulfillment through structured data collection and immediate communication triggers.