How to Build a Survey Form in Angular

Creating a survey form in Angular is something I’ve done countless times, and it’s one of the core skills you’ll need as a developer.

Whether it’s collecting user feedback, conducting research, or gathering customer insights, Angular’s got everything you need to build efficient, user-friendly forms.

If you haven’t yet dipped your toes into Angular forms, don’t worry—I’ll break it down for you step by step.

By the end of this, you’ll know how to create a survey form with Angular’s Reactive Forms, validate user input, and set up a smooth, functional form. Let’s dive right in.

1. Set Up Your Angular Project

Before we get to the fun part, you need to set up your Angular environment. If you haven’t already, go ahead and create a new Angular project:

ng new survey-form

Once that’s done, navigate into your project folder:

cd survey-form

Now, let’s generate a new component that will house our form:

ng generate component survey-form

This gives us a clean starting point. From here, we’ll add the necessary form elements and logic.

2. Angular Forms 101

Angular makes form-building simple, but you’ve got two main approaches:

• Template-driven forms: These are easier for smaller forms but lack the flexibility you might need for more complex logic.
• Reactive forms: These are what I prefer for any serious form work. Reactive forms are more dynamic, giving you better control over the form’s data and validation.

We’re going with Reactive Forms here because they’re just more powerful when it comes to validation and managing form state.

3. Set Up Reactive Forms

Next, you need to enable the Reactive Forms module in your project. Open up src/app/app.module.ts and import ReactiveFormsModule:

import { ReactiveFormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent, SurveyFormComponent],
  imports: [BrowserModule, ReactiveFormsModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

Without this, Angular won’t know what to do with your form, so this is a must-have step.

4. Creating the Survey Form

Now, let’s get into the meat of it. Open up survey-form.component.ts and use Angular’s FormBuilder to create your form. Here’s how it should look:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-survey-form',
  templateUrl: './survey-form.component.html',
  styleUrls: ['./survey-form.component.css']
})
export class SurveyFormComponent {
  surveyForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.surveyForm = this.fb.group({
      name: ['', Validators.required],
      email: ['', [Validators.required, Validators.email]],
      age: ['', [Validators.required, Validators.min(18)]],
      feedback: [''],
      rating: ['', Validators.required]
    });
  }

  onSubmit() {
    if (this.surveyForm.valid) {
      console.log('Survey Submitted', this.surveyForm.value);
    } else {
      console.log('Form not valid');
    }
  }
}

Here’s the breakdown:

• We’re using FormBuilder to create a FormGroup with fields for name, email, age, feedback, and rating.
• Validators are added directly to ensure fields like name, email, and age meet certain requirements.

This approach ensures you have full control over the form’s behavior.

5. Designing the Survey Form Template

Let’s move to the template (HTML) part. This is where the magic happens—where users actually interact with your form. In survey-form.component.html, lay out your form like this:

<form [formGroup]="surveyForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="name">Name:</label>
    <input id="name" formControlName="name" />
    <div *ngIf="surveyForm.get('name')?.invalid && surveyForm.get('name')?.touched">
      Name is required.
    </div>
  </div>

  <div>
    <label for="email">Email:</label>
    <input id="email" formControlName="email" />
    <div *ngIf="surveyForm.get('email')?.invalid && surveyForm.get('email')?.touched">
      Valid email is required.
    </div>
  </div>

  <div>
    <label for="age">Age:</label>
    <input id="age" type="number" formControlName="age" />
    <div *ngIf="surveyForm.get('age')?.invalid && surveyForm.get('age')?.touched">
      You must be at least 18 years old.
    </div>
  </div>

  <div>
    <label for="feedback">Feedback:</label>
    <textarea id="feedback" formControlName="feedback"></textarea>
  </div>

  <div>
    <label>Rating:</label>
    <select formControlName="rating">
      <option value="">Select Rating</option>
      <option value="1">1 - Poor</option>
      <option value="2">2 - Fair</option>
      <option value="3">3 - Good</option>
      <option value="4">4 - Very Good</option>
      <option value="5">5 - Excellent</option>
    </select>
    <div *ngIf="surveyForm.get('rating')?.invalid && surveyForm.get('rating')?.touched">
      Rating is required.
    </div>
  </div>

  <button type="submit" [disabled]="surveyForm.invalid">Submit</button>
</form>

What’s going on here? Well, each form control is bound to the corresponding field in the FormGroup.

We’re using formControlName to bind each input and handle validation errors by showing messages only when fields are invalid and touched.

6. Handling Validation and Form Submission

At this point, the form will only submit if it passes all the validation checks. The onSubmit() method verifies the form’s validity, and if everything is good, it logs the form values to the console.

In a real-world scenario, you’d likely send this data to an API for further processing, but logging it is enough for our example.

7. Styling the Survey Form

Now, let’s add some simple styling to make the form look a bit nicer. Open survey-form.component.css and add the following:

form {
  max-width: 600px;
  margin: 0 auto;
}

div {
  margin-bottom: 15px;
}

label {
  display: block;
  font-weight: bold;
}

input, select, textarea {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
}

button {
  padding: 10px 20px;
  background-color: #28a745;
  color: white;
  border: none;
  cursor: pointer;
}

button:disabled {
  background-color: #ccc;
}

div div {
  color: red;
  font-size: 12px;
}

This will give your form a clean, centered layout and highlight validation messages in red for clarity.

8. Testing the Survey Form

With everything in place, it’s time to test. Run your application with:

ng serve

Open your browser and head to http://localhost:4200. You should see your survey form ready for action. Try filling it out and submitting—it should log the results in the console.

Wrapping Up

And that’s it! You now know how to build a survey form in Angular using Reactive Forms. This method gives you a lot of control, from simple validation rules to more complex form structures.

Plus, Angular’s tools make it easy to scale this approach for larger, more advanced forms.

Now, whether you need a simple form for feedback or something more detailed for customer insights, you’ve got the know-how to get it done!

Happy coding!