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

Create Event Form Setup

Explore how to build an interactive Angular form for event creation by using FormBuilder to manage FormGroups and FormControls. Understand implementing validations with Validators, integrating Google Places autocomplete, and handling form submission with reactive form directives for a user-friendly experience.

We'll cover the following...

Now that all our modules and packages are set up, we can create our form.

This is our code so far:

<!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

Update component

  1. Start by adding the following imports to EventCreateComponent:

    1. FormBuilder is a class that’s used to help us create the various controls, known as FormControls, within our form. These controls are a part of a FormGroup which in our case represents our entire form. So our form is composed of FormControls that are all a part of a FormGroup which we create using FormBuilder.

    2. MapsAPILoader is a part of AGM, which will be used to load the Google Places API.

TypeScript 3.3.4
// src/app/event/event-create/event-create.component.ts
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { MapsAPILoader } from '@agm/core';
  1. Now inject the FormBuilder and MapsAPILoader dependencies into our constructor
TypeScript 3.3.4
// src/app/event/event-create/event-create.component.ts
export class EventCreateComponent implements OnInit {
  eventForm: FormGroup;
  constructor(private fb: FormBuilder, private gmaps: MapsAPILoader) { }
  ngOnInit(): void {
  }
}
  1. Along with the dependencies, create a property eventForm of type FormGroup. This is the FormGroup that will contain all of the FormControls within our form.

Add CreateForm method

From here, add a method to use our injected FormBuilder to create a form setting it to our local eventForm of type FormGroup.

TypeScript 3.3.4
// src/app/event/event-create/event-create.component.ts
createForm() {
  this.eventForm = this.fb.group({
    title: ['', Validators.required],
    description: [''],
    location: ['', Validators.required],
    startTime: ['', Validators.required],
    endTime: ['', Validators.required],
    suggestLocations: [false, Validators.required]
  });
}
  1. Utilize the FormBuilder by calling fb.group() to create a FormGroup setting it to our
...