Learn Front-End Development and Automated Testing with Angular/

...

/

Form Submission Functionality

Form Submission Functionality

Let's add the onSubmit functionality and a button that submits our event form.

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.

Press + to interact
// 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.

Press + to interact
// 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:

...