Search⌘ K
Home
Courses
Learn Front-End Development and Automated Testing with Angular

Form Submission Functionality

Explore how to implement form submission in an Angular event creation component. Learn to retrieve user details, handle Google Places Autocomplete data, send event requests to an API, and display success or error feedback to users. This lesson guides you through integrating interactive forms with backend services.

We'll cover the following...

Now that our form is set up and our third-party libraries are working, we can add the onSubmit method that’s bound to the form’s ngSubmit event.

Below is our updated code. Use this to make changes throughout the lesson.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LetsGetLunch</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
Google Maps API key autocomplete

Add onSubmit method

Update the event-create component to add the onSubmit method and add the imports.

TypeScript 3.3.4
// src/app/event/event-create/event-create.component.ts
import { Event } from '../../services/events/event';
import { EventsService } from '../../services/events/events.service';
import { AuthService } from '../../services/auth/auth.service';

Inject our new dependencies into the component’s constructor.

TypeScript 3.3.4
// src/app/event/event-create/event-create.component.ts
constructor(private fb: FormBuilder,
  private gmaps: MapsAPILoader,
  private ngZone: NgZone,
  private eventsService: EventsService,
  private authService: AuthService) {}

Now add our onSubmit method in EventCreateComponent as follows:

...