Forms & Validation Interview Questions

Angular has Template-driven forms (simple, directive based, async validation) and Reactive forms (complex, explicit, synchronous validation). Template-driven forms use two-way binding with ngModel, while Reactive forms use FormGroup/FormControl with explicit form model.

Reactive form validation uses validators in FormControl/FormGroup construction. Built-in validators (required, minLength, pattern) or custom validators. Status and error states tracked through form control properties. Synchronous and async validation supported.

FormControl tracks value/validation of individual form field. FormGroup groups related controls together, tracks aggregate value/status. Both provide value changes observables, validation state, methods for value updates.

Custom validators are functions returning validation errors or null. Can be synchronous (ValidatorFn) or asynchronous (AsyncValidatorFn). Implement for complex validation logic. Can access external services, combine multiple validations.

FormArray manages collection of form controls/groups dynamically. Used for variable-length form fields (dynamic forms, multiple items). Provides array-like API for manipulation. Common in dynamic questionnaires, product lists.

Form submission handled through ngSubmit event or form's submit method. Implement validation checks, disable submit during processing, handle success/error responses. Consider loading states, user feedback, form reset.

Form states include: pristine/dirty, touched/untouched, valid/invalid, pending. Tracked through form control properties and CSS classes. Used for validation feedback, UI updates. Available at control and form level.

Cross-field validation implemented through form group validators. Access multiple control values, compare fields (password confirmation). Can use custom validators at group level. Important for related field validation.

Async validators perform validation asynchronously (API calls, database checks). Return Promise/Observable. Used for unique email/username validation. Handle pending state, implement debounce time. Consider error handling.

Forms reset using reset() method on FormGroup/FormControl. Can provide initial values, reset specific controls. Resets both values and validation states. Consider UI feedback, data preservation needs.

FormBuilder service provides syntactic sugar for creating form controls. Simplifies complex form creation, reduces boilerplate. Methods include control(), group(), array(). Improves code readability and maintenance.

File uploads handled through input type='file' and FormData. Use change event to capture files, implement validation (size, type). Consider progress tracking, multiple file handling, chunked uploads.

valueChanges and statusChanges are observables tracking form changes. valueChanges emits new values, statusChanges emits validation status. Used for reactive form updates, validation feedback. Support filtering, debouncing.

Conditional validation changes validation rules based on conditions. Implement through setValidators(), clearValidators(). Update validators dynamically based on form values/state. Consider validation dependencies.

Form control wrappers are custom components wrapping form controls. Provide reusable validation, styling, behavior. Implement ControlValueAccessor interface. Common for custom input components, complex controls.

Form arrays validation applies at array and item levels. Validate array length, individual controls. Can implement custom validators for array-specific rules. Consider dynamic validation updates, error aggregation.

updateOn controls when form control updates (change, blur, submit). Affects validation timing, value updates. Configurable at control/group level. Important for performance, user experience optimization.

Custom error messages handled through error states in template. Access errors through control.errors property. Can use error message service, translation support. Consider message formatting, multiple errors.

Best practices: immediate feedback, clear error messages, consistent validation, proper error states, accessibility support. Consider user experience, performance, maintainability. Implement proper error handling.

Dynamic forms built using form arrays/groups, metadata-driven approach. Generate controls from configuration/data. Consider validation rules, field dependencies. Important for configurable forms, surveys.

ngModel provides two-way data binding in template-driven forms. Creates form controls implicitly, tracks value/validation state. Requires FormsModule. Limited compared to reactive forms' explicit control.

Form submission errors handled through error callbacks, error states. Display user-friendly messages, highlight affected fields. Consider error types, recovery options. Implement proper error handling patterns.

Nested form groups organize related controls hierarchically. Created using FormBuilder.group() nesting. Support complex form structures, modular validation. Common in address forms, complex data entry.

Validation messages implemented through template logic, error states. Can use validation message service, localization support. Consider message context, multiple languages. Important for user feedback.

Dirty checking tracks form value changes. pristine/dirty states indicate modifications. Used for save prompts, reset functionality. Important for tracking user interactions, form state management.

Form array validation patterns include: min/max items, unique values, dependent validations. Implement through custom validators, array-level validation. Consider complex validation scenarios, error aggregation.

Common patterns: required fields, email format, password strength, numeric ranges, custom regex. Implement through built-in/custom validators. Consider user experience, security requirements.

Form state persistence through services, local storage, state management. Consider autosave functionality, recovery options. Important for long forms, multi-step processes. Implement proper cleanup.

Form control events include: valueChanges, statusChanges, focus/blur events. Handle through event bindings, observables. Used for validation feedback, dependent updates. Consider event ordering, performance.

Multi-step validation through form groups per step, wizard pattern. Validate each step, track completion status. Consider state management, navigation rules. Important for complex workflows.

Angular has Template-driven forms (simple, directive based, async validation) and Reactive forms (complex, explicit, synchronous validation). Template-driven forms use two-way binding with ngModel, while Reactive forms use FormGroup/FormControl with explicit form model.

Reactive form validation uses validators in FormControl/FormGroup construction. Built-in validators (required, minLength, pattern) or custom validators. Status and error states tracked through form control properties. Synchronous and async validation supported.

FormControl tracks value/validation of individual form field. FormGroup groups related controls together, tracks aggregate value/status. Both provide value changes observables, validation state, methods for value updates.

Custom validators are functions returning validation errors or null. Can be synchronous (ValidatorFn) or asynchronous (AsyncValidatorFn). Implement for complex validation logic. Can access external services, combine multiple validations.

FormArray manages collection of form controls/groups dynamically. Used for variable-length form fields (dynamic forms, multiple items). Provides array-like API for manipulation. Common in dynamic questionnaires, product lists.

Form submission handled through ngSubmit event or form's submit method. Implement validation checks, disable submit during processing, handle success/error responses. Consider loading states, user feedback, form reset.

Form states include: pristine/dirty, touched/untouched, valid/invalid, pending. Tracked through form control properties and CSS classes. Used for validation feedback, UI updates. Available at control and form level.

Cross-field validation implemented through form group validators. Access multiple control values, compare fields (password confirmation). Can use custom validators at group level. Important for related field validation.

Async validators perform validation asynchronously (API calls, database checks). Return Promise/Observable. Used for unique email/username validation. Handle pending state, implement debounce time. Consider error handling.

Forms reset using reset() method on FormGroup/FormControl. Can provide initial values, reset specific controls. Resets both values and validation states. Consider UI feedback, data preservation needs.

FormBuilder service provides syntactic sugar for creating form controls. Simplifies complex form creation, reduces boilerplate. Methods include control(), group(), array(). Improves code readability and maintenance.

File uploads handled through input type='file' and FormData. Use change event to capture files, implement validation (size, type). Consider progress tracking, multiple file handling, chunked uploads.

valueChanges and statusChanges are observables tracking form changes. valueChanges emits new values, statusChanges emits validation status. Used for reactive form updates, validation feedback. Support filtering, debouncing.

Conditional validation changes validation rules based on conditions. Implement through setValidators(), clearValidators(). Update validators dynamically based on form values/state. Consider validation dependencies.

Form control wrappers are custom components wrapping form controls. Provide reusable validation, styling, behavior. Implement ControlValueAccessor interface. Common for custom input components, complex controls.

Form arrays validation applies at array and item levels. Validate array length, individual controls. Can implement custom validators for array-specific rules. Consider dynamic validation updates, error aggregation.

updateOn controls when form control updates (change, blur, submit). Affects validation timing, value updates. Configurable at control/group level. Important for performance, user experience optimization.

Custom error messages handled through error states in template. Access errors through control.errors property. Can use error message service, translation support. Consider message formatting, multiple errors.

Best practices: immediate feedback, clear error messages, consistent validation, proper error states, accessibility support. Consider user experience, performance, maintainability. Implement proper error handling.

Dynamic forms built using form arrays/groups, metadata-driven approach. Generate controls from configuration/data. Consider validation rules, field dependencies. Important for configurable forms, surveys.

ngModel provides two-way data binding in template-driven forms. Creates form controls implicitly, tracks value/validation state. Requires FormsModule. Limited compared to reactive forms' explicit control.

Form submission errors handled through error callbacks, error states. Display user-friendly messages, highlight affected fields. Consider error types, recovery options. Implement proper error handling patterns.

Nested form groups organize related controls hierarchically. Created using FormBuilder.group() nesting. Support complex form structures, modular validation. Common in address forms, complex data entry.

Validation messages implemented through template logic, error states. Can use validation message service, localization support. Consider message context, multiple languages. Important for user feedback.

Dirty checking tracks form value changes. pristine/dirty states indicate modifications. Used for save prompts, reset functionality. Important for tracking user interactions, form state management.

Form array validation patterns include: min/max items, unique values, dependent validations. Implement through custom validators, array-level validation. Consider complex validation scenarios, error aggregation.

Common patterns: required fields, email format, password strength, numeric ranges, custom regex. Implement through built-in/custom validators. Consider user experience, security requirements.

Form state persistence through services, local storage, state management. Consider autosave functionality, recovery options. Important for long forms, multi-step processes. Implement proper cleanup.

Form control events include: valueChanges, statusChanges, focus/blur events. Handle through event bindings, observables. Used for validation feedback, dependent updates. Consider event ordering, performance.

Multi-step validation through form groups per step, wizard pattern. Validate each step, track completion status. Consider state management, navigation rules. Important for complex workflows.