Strengthening Dynamic Angular Form Validation and Error Rendering

The Problem

Profile editing workflows used dynamic phone rows that could be added, changed, and removed. The forms allowed duplicate phone records and phone types, while extension values were not consistently constrained before submission.

The underlying controls could correctly contain built-in or custom validation errors while Angular Material failed to display the corresponding mat-error content. In other cases, errors remained visible after users corrected or removed conflicting rows.

These were not isolated template defects. Composite uniqueness, dynamic control lifecycles, control-state transitions, and error rendering needed to operate as one coordinated validation system.

Technical Leadership

• Reframed duplicate detection and error rendering as one validation-state architecture problem.
• Designed composite validation around realistic editing behavior instead of relying on backend rejection.
• Standardized when errors should appear using consistent invalid, touched, and dirty state rules.
• Coordinated validator execution, updateValueAndValidity calls, dynamic row changes, and template bindings.
• Added regression coverage for both domain-rule correctness and visible validation feedback.

Constraints

• Evaluate uniqueness across every active FormArray row rather than only the field being edited.
• Treat phone number, extension, and phone type as a composite validation concern.
• Support controls and rows being added, edited, conditionally rendered, and removed.
• Display errors only at useful interaction points without hiding invalid state.
• Clear custom errors without accidentally removing unrelated validator results.
• Preserve existing submission behavior and Angular Material presentation.

What I Did

The form became dependable only when domain validation, control state, and rendered feedback were treated as one continuous workflow.

Composite validators examined phone number, extension, and type values across the complete FormArray. Numeric and length rules hardened extension input, while add, edit, and remove operations triggered the validity recalculation needed to clear or redistribute duplicate errors.

Angular Material templates were aligned with the actual Reactive Forms state model. Consistent error predicates and explicit custom-error bindings ensured mat-error content appeared when controls were invalid and disappeared after the underlying problem was resolved.

• Implemented composite duplicate detection across phone number, extension, and phone type values.
• Applied validation across the complete FormArray rather than evaluating rows independently.
• Enforced numeric-only and maximum-length constraints for phone extensions.
• Standardized error visibility around invalid controls that had been touched or changed.
• Bound Angular Material error content to built-in and custom validator keys explicitly.
• Used updateValueAndValidity when dynamic controls or related row values changed.
• Cleared duplicate and custom errors without leaving stale validation state.
• Kept form submission rules aligned with the errors users could actually see.

Testing and Validation

Testing covered the relationship between data rules and UI feedback, including changes that affected more than one dynamic row.

The final scenarios verified both the FormControl error objects and the Angular Material behavior visible to users.

• Added Karma unit tests for duplicate phone records and duplicate phone types.
• Covered composite uniqueness across number, extension, and type.
• Verified add, edit, and remove scenarios recalculated FormArray validity.
• Tested numeric and maximum-length extension validation.
• Confirmed built-in and custom mat-error messages appeared after the intended interactions.
• Verified corrected values removed visible errors and restored valid submission state.
• Exercised partial input, rapid value changes, blur events, and dynamic control updates.
• Retested form submission and unaffected controls for regressions.

Outcome

• Reduced duplicate and malformed phone data before it reached backend services.
• Eliminated invisible, delayed, and stale Angular Material validation feedback.
• Made dynamic profile editing more predictable for users.
• Reduced QA defects caused by difficult-to-reproduce validation-state transitions.
• Established reusable Angular patterns for FormArray validation, custom errors, validity recalculation, and mat-error rendering.