Angular FormGroup在本地方法中未定义

Question

我有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-tab时，会触发ContactDetailsComponent的ngOnInit（由于它是从ng-template里面延迟加载的，但是单击继续按钮时，会显示错误TypeError: Cannot read property 'controls' of undefined。

为什么FormGroup undefined在本地函数中？

更新

我为this设置了ContactDetailsComponent上下文，但发现它没有contactDetailsForm属性。然后，我将变量声明从contactDetailsForm:FormGroup更改为contactDetailsForm:FormGroup=new FormGroup({})，然后在this上进行了注册，但是对ngOnInit内的FormControls进行的验证不再起作用。我还向组件添加了另一个FormGroup，并且发生了相同的事情。似乎this仅注册已初始化的属性，尽管我不确定为什么会发生这种情况。

Answer 1

您是否尝试从父级调用子级方法？