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.
This step adds the code to the details page that handles the form's 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.
This button does not exist yet - you will add it in the next step. In the above code, the FormControls 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.
The template now includes an event handler (submit)="submitApplication()". Angular uses parentheses syntax around the event name to 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.
1. Add a method to send form data
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:
2. Add the form functions to the details page
This step adds the code to the details page that handles the form's 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.
In the DetailsComponent decorator metadata, update the imports property with the following code:
In the DetailsComponent class, before the constructor() method, add the following code to create the form object.
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.
This button does not exist yet - you will add it in the next step. In the above code, the FormControls 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.
3. Add the form's markup to the details page
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.
The template now includes an event handler (submit)="submitApplication()". Angular uses parentheses syntax around the event name to 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.
4. Test your app's new form
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.