Building a Customer Feedback Form with Dynamic Validation in Angular

Creating an effective customer feedback form is essential for understanding your clients’ needs and improving your services. When combined with Angular’s powerful features, you can build a dynamic validation system that enhances user experience and data accuracy.

Understanding Angular’s Reactive Forms

Angular offers two main approaches for handling forms: Template-driven and Reactive Forms. For dynamic validation, Reactive Forms provide greater flexibility and control. They allow you to define form controls and validation rules programmatically, making it easier to adapt to user input in real-time.

Setting Up the Feedback Form

Begin by importing the necessary modules in your Angular component:

app.module.ts

“`typescript
import { ReactiveFormsModule } from ‘@angular/forms’;
@NgModule({
imports: [ReactiveFormsModule],
// other configurations
})
“`

Next, create the form in your component:

feedback.component.ts

“`typescript
import { Component } from ‘@angular/core’;
import { FormBuilder, FormGroup, Validators } from ‘@angular/forms’;

@Component({
selector: ‘app-feedback’,
templateUrl: ‘./feedback.component.html’
})
export class FeedbackComponent {
feedbackForm: FormGroup;

constructor(private fb: FormBuilder) {
this.feedbackForm = this.fb.group({
name: [”, Validators.required],
email: [”, [Validators.required, Validators.email]],
message: [”, [Validators.required, Validators.minLength(10)]],
rating: [”, Validators.required]
});
}

onSubmit() {
if (this.feedbackForm.valid) {
// Process feedback
console.log(this.feedbackForm.value);
} else {
// Highlight errors
this.markFormGroupTouched(this.feedbackForm);
}
}

private markFormGroupTouched(formGroup: FormGroup) {
Object.values(formGroup.controls).forEach(control => {
control.markAsTouched();
if ((control as any).controls) {
this.markFormGroupTouched(control as FormGroup);
}
});
}
} “`

Creating the Feedback Form Template

Design the form in the HTML template, binding it to the reactive form and adding validation feedback:

feedback.component.html

“`html

Name:

Name is required.

Email:

Enter a valid email.

Message:

Message must be at least 10 characters long.

Rating:

Select a rating
1 – Poor
2 – Fair
3 – Good
4 – Very Good
5 – Excellent

Rating is required.

Submit Feedback

“`

Implementing Dynamic Validation

Angular’s reactive forms allow you to add or modify validation rules dynamically. For example, you can change the validation based on user input or other conditions:

In your component, add a method to update validation rules:

feedback.component.ts

“`typescript
updateValidation() {
if (someCondition) {
this.feedbackForm.get(‘message’)?.setValidators([Validators.required, Validators.minLength(20)]);
} else {
this.feedbackForm.get(‘message’)?.setValidators([Validators.required, Validators.minLength(10)]);
}
this.feedbackForm.get(‘message’)?.updateValueAndValidity();
}
“`

This approach makes your form highly adaptable, providing real-time validation feedback based on user interactions.

Conclusion

Using Angular’s Reactive Forms with dynamic validation creates a robust and user-friendly customer feedback form. It ensures data integrity while providing immediate feedback to users. Implementing such forms can significantly improve the quality of your collected data and overall user experience.