Angular FormGroup не определена внутри локального метода

У меня есть 2 компонента параллельно, и я пытаюсь ввести 1 компонент в другой. Ниже представлены мои файлы компонентов:

RegisterComponent.html

<mat-tab #tab label="Contact Details">
  <ng-template matTabContent>
    <app-contact-details></app-contact-details>
  </ng-template>
</mat-tab>

<button type="button" (click)="changeTabOrStepViaContinue()" class="">Continue</button>

RegisterComponent.ts

changeTabOrStepViaContinue() {
    if (this.tabGroup._tabs.first.isActive) {
      this.tabGroup.selectedIndex += 1;
    } else if (this.tabGroup._tabs.last.isActive /* &&  this.isContactFormValid() */) {
        this.contactDetails.validateContactDetails(); //throws Error
      console.log("Contact details form: ", this.contactDetailsForm);
    } else if (this.isPersonalDetailsFormValid()) {
        this.tabGroup.selectedIndex += 1;
    }
  }

ContactDetailsComponent.ts (внедряемый компонент)

ngOnInit() {
    console.log("Contct det ngOnInit fired......")
    this.contactDetailsForm = this.formBuilder.group({
      primaryMobile: ['', [Validators.required]],
      primaryMobileOwner: ['', [Validators.required]],
      primaryEmail: ['', [Validators.required]],
      primaryEmailOwner: ['', [Validators.required]],
      landLine: [''],
      country: ['', [Validators.required]],
      pinCode: ['', [Validators.required]],
      flat: ['', [Validators.required]],
      street: [''],
      postOffice: ['', [Validators.required]],
      locality: ['', [Validators.required]],
      district: ['', [Validators.required]],
      state: ['', [Validators.required]]
    })
}

validateContactDetails(): boolean {
    console.log(this.contactDetailsForm);
    Object.keys(this.contactDetailsForm.controls).forEach(elt => {
      this.contactDetailsForm.get(elt).markAsTouched();
    })
    if (this.contactDetailsForm.valid) {
      this.contactDetails.emit(this.contactDetailsForm);
      return true;
    }
    return false;
  }

Я сделал ContactDetailsComponent сервисом, включив @Injectable({providedIn:'root'}), а также внедрил его в конструктор RegisterComponent как constructor(private contactDetails:ContactDetailsComponent).

Когда я выбираю конкретную вкладку mat, запускается ngOnInit для ContactDetailsComponent (он загружается лениво, так как внутри ng-шаблона), но при нажатии кнопки продолжения отображается ошибка TypeError: Cannot read property 'controls' of undefined.

Почему FormGroup undefined находится внутри локальной функции?

Обновить

Я утешил this контекст для ContactDetailsComponent и обнаружил, что у него нет свойства contactDetailsForm. Затем я изменил объявление переменной с contactDetailsForm:FormGroup на contactDetailsForm:FormGroup=new FormGroup({}), а затем он был зарегистрирован на this, но проверки, помещенные в FormControls внутри ngOnInit, больше не работают. Я также добавил к компоненту еще одну FormGroup, и происходит то же самое. Похоже, что this регистрирует только инициализированные свойства, хотя я не уверен, почему это происходит.