Angular Unit Testing - How to fix 'Cannot read property "middle_name" of undefined' when initializing a component

I am trying to create a simple 'it should create' unit test for one of my Angular components (the test generated by Angular CLI when generating the component). However, when running the test, I receive a TypeError: Cannot read property 'middle_name' of undefined. I didn't expect this error because the HTML is surrounded in an *ngIf.

I tried to follow this question on stackoverflow: Angular testing Cannot read property 'name' of undefined

However the OP resolved the problem by surrounding his HTML in an *ngIf, which is what my code currently does. I suspect the problem is occurring because this is a child component and is conditionally rendered.

form-submit-individual-success-component.ts:

it('should create', () => {
    expect(component).toBeTruthy();
});

add-entity.ts:

onIndividualSubmit(clonedIndividualValues: Individual): void {
  this.entityService.addIndividual(clonedIndividualValues)
.subscribe(individual => {
      this.formIsSubmitted = true;
      this.individualFormIsSubmitted = true;
      this.individualId = individual.id;
      this.individualFormData = individual;
    })
}

add-entity.html:

<app-add-individual-form *ngIf="selectedOption == 'Individual' && !individualFormIsSubmitted" (individualServiceEmitter)="onIndividualSubmit($event)" [individualId]="individualId"></app-add-individual-form>

add-individual-form.ts:

@Output() individualServiceEmitter = new EventEmitter();
onIndividualSubmit(value: any): void {

  value.eod_screening === 'Yes' ? value.eod_screnning = 1 : value.eod_screening = 0;

  const clonedIndividualValues = Object.assign({ type: 'Individual', screening_status: 'Awaiting Submission' }, value)

  this.individualServiceEmitter.emit(clonedIndividualValues);
}

add-individual-form.html:

<div class="form-group">
  <label for="middle_name">Middle Name(s)</label>
  <input type="text" class="form-control" id="middle_name" name="middle_name" formControlName="middle_name"
  #middle_name>
  <div *ngFor="let validation of validation_messages.middle_name">
    <div *ngIf="individualForm.middle_name.hasError(validation.type) && (individualForm.middle_name.dirty || individualForm.middle_name.touched)"
    class="alert alert-danger">
    
    </div>
  </div>
</div>

<div class="form-group">
  <label for="last_name">Last Name</label>
  <input type="text" class="form-control" id="last_name" name="last_name" formControlName="last_name" #last_name
  required>
  <div *ngFor="let validation of validation_messages.last_name">
    <div *ngIf="individualForm.last_name.hasError(validation.type) && (individualForm.last_name.dirty || individualForm.last_name.touched)"
    class="alert alert-danger">
    
    </div>
  </div>
</div>

<button type="submit" class="btn btn-success" [disabled]="!addIndividualForm.valid">Submit</button>

form-submit-individual-success.ts:

@Input() formData: Individual;
public individualFormData: Individual;
@Input() id: number;
public individualId: number;
public editIndividualBase = "/entity/edit";

constructor() { }

ngOnInit() {
  this.individualFormData = this.formData;
}

form-submit-individual-success.html:

 <p>First name: <span></span></p>
 <p *ngIf="individualFormData.middle_name">Middle name(s): <span></span></p>
 <p>Last name: <span></span></p>

As described in the problem summary, I expect the component toBeTruthy (i.e. create successfully).