How to Add a Form to Your Angular App

In this guide, you’ll learn how to easily add a form to your Angular app that collects user data. The form will send the data to your app’s service, which then logs it in the browser’s console. Here’s a step-by-step tutorial on how to achieve this.

Step 1: Add a Method to Submit Form Data

First, you need to create a method in your service that handles the form data submission.

1. Open your src/app/housing.service.ts file.
2. Inside the HousingService class, add the following method at the bottom:

submitApplication(firstName: string, lastName: string, email: string) {
  console.log(`Application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`);
}

This method captures the first name, last name, and email from the form and logs it to the console. Once added, ensure your app builds without any errors.

Step 2: Add Form Functions to the Details Page

Next, we’ll add the necessary Angular form imports and create a form object in the details component.

1. Open the src/app/details/details.component.ts file.
2. Add the following code to import form-related classes:

import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';

Update the imports property of the DetailsComponent decorator like this:

imports: [
  CommonModule,
  ReactiveFormsModule
],

Now, inside the DetailsComponent class, create the form object before the constructor:

applyForm = new FormGroup({
  firstName: new FormControl(''),
  lastName: new FormControl(''),
  email: new FormControl('')
});

Lastly, add a method to handle the form submission after the constructor:

submitApplication() {
  this.housingService.submitApplication(
    this.applyForm.value.firstName ?? '',
    this.applyForm.value.lastName ?? '',
    this.applyForm.value.email ?? ''
  );
}

This ensures that the form data is passed to the submitApplication method when the user clicks the submit button. The code also handles null values by using the nullish coalescing operator (??).

Step 3: Add the Form Markup to the Details Page

Now it’s time to add the HTML form to the details page.

1. In the same details.component.ts file, update the template with this code:

<article>
  <img class="listing-photo" [src]="housingLocation?.photo" alt="Exterior photo of {{housingLocation?.name}}" />
  <section class="listing-description">
    <h2>{{housingLocation?.name}}</h2>
    <p>{{housingLocation?.city}}, {{housingLocation?.state}}</p>
  </section>
  <section class="listing-features">
    <h2>About this location</h2>
    <ul>
      <li>Units available: {{housingLocation?.availableUnits}}</li>
      <li>Wifi: {{housingLocation?.wifi}}</li>
      <li>Laundry: {{housingLocation?.laundry}}</li>
    </ul>
  </section>
  <section class="listing-apply">
    <h2>Apply Now</h2>
    <form [formGroup]="applyForm" (submit)="submitApplication()">
      <label for="first-name">First Name</label>
      <input id="first-name" type="text" formControlName="firstName">

      <label for="last-name">Last Name</label>
      <input id="last-name" type="text" formControlName="lastName">

      <label for="email">Email</label>
      <input id="email" type="email" formControlName="email">
      <button type="submit">Apply Now</button>
    </form>
  </section>
</article>

This template includes a form with input fields for the first name, last name, and email. The (submit)=”submitApplication()” event triggers the method that handles the form submission.

By following these three simple steps, you can quickly add a user data collection form to your Angular app. This tutorial demonstrated how to log form data to the console, but you can extend it by integrating with a backend REST API. Make sure your app builds successfully after each step and correct any errors before proceeding.

Keep Learning 🙂