This tutorial lesson demonstrates how to add a form that collects user data to an Angular app. This lesson starts with a functional Angular app and shows how to add a form it.
The data that the form collects is sent only to the app's service, which writes it to the browser's console. Using a REST API to send and receive the form's data is not covered in this lesson.
Time required: expect to spend about 20 minutes to complete this lesson.
This lesson starts with the code from the previous lesson, so you can:
If you haven't reviewed the introduction, visit the Introduction to Angular tutorial to make sure you have everything you need to complete this lesson.
If you have any trouble during this lesson, you can review the completed code for this lesson, in the live example for this lesson.
Perform these steps on the app code in your IDE.
This step adds a method to your app's service that receives the form data to send to the data's destination. In this example, the method writes the data from the form to the browser's console log.
In the Edit pane of your IDE:
In src/app/housing.service.ts
, inside the HousingService
class, paste this method at the bottom of the class definition.
submitApplication(firstName: string, lastName: string, email: string) { console.log(`Homes application received: firstName: ${firstName}, lastName: ${lastName}, email: ${email}.`); }
Confirm that the app builds without error. Correct any errors before you continue to the next step.
This step adds the code to the details page that handles the form interactions.
In the Edit pane of your IDE, in src/app/details/details.component.ts
:
After the import
statements at the top of the file, add the following code to import the Angular form classes.
import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
In the DetailsComponent
decorator metadata, update the imports
property with the following code:
imports: [ CommonModule, ReactiveFormsModule ],
In the DetailsComponent
class, before the constructor()
method, add the following code to create the form object.
applyForm = new FormGroup({ firstName: new FormControl(''), lastName: new FormControl(''), email: new FormControl('') });
In Angular, FormGroup
and FormControl
are types that enable you to build forms. The FormControl
type can provide a default value and shape the form data. In this example firstName
is a string
and the default value is empty string.
In the DetailsComponent
class, after the constructor()
method, add the following code to handle the Apply now click.
submitApplication() { this.housingService.submitApplication( this.applyForm.value.firstName ?? '', this.applyForm.value.lastName ?? '', this.applyForm.value.email ?? '' ); }
This button does not exist yet - you will add it in the next step. In the above code, the FormControl
s may return null
. This code uses the nullish coalescing operator to default to empty string if the value is null
.
Confirm that the app builds without error. Correct any errors before you continue to the next step.
This step adds the markup to the details page that displays the form.
In the Edit pane of your IDE, in src/app/details/details.component.ts
:
In the DetailsComponent
decorator metadata, update the template
HTML to match the following code to add the form's markup.
template: ` <article> <img class="listing-photo" [src]="housingLocation?.photo" alt="Exterior photo of {{housingLocation?.name}}"/> <section class="listing-description"> <h2 class="listing-heading">{{housingLocation?.name}}</h2> <p class="listing-location">{{housingLocation?.city}}, {{housingLocation?.state}}</p> </section> <section class="listing-features"> <h2 class="section-heading">About this housing location</h2> <ul> <li>Units available: {{housingLocation?.availableUnits}}</li> <li>Does this location have wifi: {{housingLocation?.wifi}}</li> <li>Does this location have laundry: {{housingLocation?.laundry}}</li> </ul> </section> <section class="listing-apply"> <h2 class="section-heading">Apply now to live here</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" class="primary">Apply now</button> </form> </section> </article> `,
The template now includes an event handler (submit)="submitApplication()"
. Angular uses parentheses syntax around the event name to create define events in the template code. The code on the right hand side of the equals sign is the code that should be executed when this event is triggered. You can bind to browser events and custom events.
Confirm that the app builds without error. Correct any errors before you continue to the next step.
This step tests the new form to see that when the form data is submitted to the app, the form data appears in the console log.
ng serve
, if it isn't already running.http://localhost:4200
.In this lesson, you updated your app to:
If you are having any trouble with this lesson, you can review the completed code for it in the live example.
For more information about the topics covered in this lesson, visit:
© 2010–2023 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/tutorial/first-app/first-app-lesson-12