Jasmine - Cannot read property 'controls' of undefined - Angular 6

I'm a beginner in Angular and I'm writing an test in Jasmine for my angular 6 EmployeeComponent. I got an error "Cannot read property 'controls' of undefined". I think I didn't set up all of the dependencies correctly in the employee.component.spec.ts file. I have researched for a few days but without results. Any help would be much appreciated.

This is the basic flow in my code. The employee component contains a registration form. When the user click 'submit', the employee service will insert/update the data to the firebase.

Below is employee.component.html

 <div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.employeeService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group" *ngIf="page1">
        <label>Full Name</label>
        <input formControlName="fullName" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.fullName.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.fullName.errors">
          This field is required.
        </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Email</label>
        <input formControlName="email" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.email.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.email.errors">
            Invalid Email Address.
          </div>
      </div>

      <div class="form-group" *ngIf="page1">
        <label>Mobile</label>
        <input formControlName="mobile" class="form-control" [ngClass]="{'is-invalid': submitted && formControls.mobile.errors}">
        <div class="invalid-feedback" *ngIf="submitted && formControls.mobile.errors">
          <label *ngIf="formControls.mobile.errors.required">This field is required.</label>
          <label *ngIf="formControls.mobile.errors.minLength">At least 8 characters</label>
        </div>
      </div>

      <div style="text-align: right" *ngIf="page1">
        <button class="btn btn-primary" (click)="part1Next()">Next</button>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>School</label>
          <input formControlName="school" class="form-control">
      </div>

      <!-- <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <input formControlName="degree" class="form-control">
      </div> -->

      <div class="form-group" *ngIf="page2">
        <label>Degree</label>
        <select class="form-control" formControlName="degree">
          <option value="bachelor">Bachelor</option>
          <option value="master">Master</option>
        </select>
      </div>

      <div class="form-group" *ngIf="page2">
          <label>Location</label>
          <input formControlName="location" class="form-control">
      </div>

      <div class="row">
          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Back()">Back</button>
          </div>

          <div class="col-md-6" style="text-align: center" *ngIf="page2">
              <button class="btn btn-primary" (click)="part2Next()">Next</button>
          </div>
      </div>

      <div *ngIf="page3">
          <div>
            <h2>Please Check all of the information below</h2>
            <p>Full Name: </p>
            <p>Email: </p>
            <p>Mobile: </p>
            <p>School: </p>
            <p>Degree: </p>
            <p>Location: </p>
          </div>
          <div class="row">
              <div class="col-md-6" style="text-align: center">
                  <button class="btn btn-primary" (click)="part3Back()">Back</button>
              </div>

              <div class="col-md-6" style="text-align: center" class="form-group">
                  <input type="submit" class = "btn btn-primary" value="Submit">
              </div>
          </div>
      </div>

    </form>
    <div class="alert alert-info" *ngIf="showSuccessMessage">
      Submitted Successfully
    </div>

  </div>

  <div class="col-md-7">
    <!-- <app-employee-list></app-employee-list> -->
  </div>

</div>

Below is employee.component.ts

import { Component, OnInit } from '@angular/core';

import { EmployeeService } from '../shared/employee.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.scss']
})
export class EmployeeComponent implements OnInit {

  constructor(private employeeService: EmployeeService) { }

  page1: boolean = true;
  page2: boolean = false;
  page3: boolean = false;

  part1Next() {
    this.page1 = false;
    this.page2 = true;
  }

  part2Back() {
    this.page1 = true;
    this.page2 = false;
  }

  part2Next() {
    this.page2 = false;
    this.page3 = true;
  }

  part3Back() {
    this.page2 = true;
    this.page3 = false;
  }

  submitted: boolean;
  showSuccessMessage: boolean;
  formControls = this.employeeService.form.controls;

  ngOnInit() {
  }

  onSubmit() {
    this.submitted = true;
    if (this.employeeService.form.valid) {
      if (this.employeeService.form.get('$key').value == null) {
        // insert
        this.employeeService.insertEmployee(this.employeeService.form.value);
      } else {
        // update
        this.employeeService.updateEmployee(this.employeeService.form.value);
      }
      this.showSuccessMessage = true;
      setTimeout(() => this.showSuccessMessage = false, 2000);
      this.submitted = false;
      this.employeeService.form.reset();
    }
    this.page1 = true;
    this.page2 = false;
    this.page3 = false;
  }
}

Below is employee.service.ts

import { Injectable } from '@angular/core';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';

@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  employeeList: AngularFireList<any>;

  constructor(private firebase: AngularFireDatabase) { }
  form = new FormGroup({
    $key: new FormControl(null),
    fullName: new FormControl('', Validators.required),
    email: new FormControl('', Validators.email),
    mobile: new FormControl('', [Validators.required, Validators.minLength(8)]),
    school: new FormControl(''),
    degree: new FormControl(''),
    location: new FormControl('')
  });

  getCustomers() {
    this.employeeList = this.firebase.list('employees');
    console.log(this.employeeList);
    return this.employeeList.snapshotChanges();
  }

  insertEmployee(employee) {
    this.employeeList.push({
      fullName: employee.fullName,
      email: employee.email,
      mobile: employee.mobile,
      school: employee.school,
      degree: employee.degree,
      location: employee.location
    });
  }

  updateEmployee(employee) {
    this.employeeList.update(employee.$key,
      {
        fullName: employee.fullName,
        email: employee.email,
        mobile: employee.mobile,
        school: employee.school,
        degree: employee.degree,
        location: employee.location
      });
  }

  populateForm(employee) {
    this.form.setValue(employee);
  }

  deleteEmployee($key: string) {
    this.employeeList.remove($key);
  }
}