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;
  }

我通过包含 @Injectable({providedIn:'root'}) 使 ContactDetailsComponent 成为一项服务，并将其作为 constructor(private contactDetails:ContactDetailsComponent) 注入到 RegisterComponent 的构造函数中。

当我 select 特定的 mat-tab 时，ContactDetailsComponent 的 ngOnInit 被触发（它是在 ng-template 内部延迟加载的）但是点击继续按钮时，它显示了一个错误 TypeError: Cannot read property 'controls' of undefined。

为什么 FormGroup undefined 在局部函数中？

更新

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

Answer 1

您是否尝试从 parent 调用 child 方法？

据我所知，您不需要注入任何东西，除非在您没有告诉我们的其他地方需要它。您可以只向 app-contact-details 添加一个 id 并使用 ViewChild 来获取引用。有多种使用 ViewChild 的方法，这一种可能不是最适合您的方法，但它只是一个示例。

<app-contact-details #contactDetail></app-contact-details>

@ViewChild('contactDetail') contactDetail: ContactDetailsComponent; // In the parent ts file

然后，如果您想查看它是否已初始化，请检查 parent 的 ngAfterViewInit，您应该可以在其中访问 children 函数（您可能需要将 contactDetail 转换为你的组件类型，或者你不同的 ViewChild 初始化）如果它们是 public 因为此时 children 的 OnInit 应该被调用。

  ngAfterViewInit() {
     // you can try to print your form
  }

您的表单未初始化的原因是您没有引用正确的实例，除非组件是单例。使用内容投影（就像你正在做的那样）组件将在 angular 开始显示它时立即初始化（这是在 child 中调用 OnInit 的地方）。

Angular FormGroup 在本地方法中未定义

Angular FormGroup is undefined inside a local method

javascript

typescript

angular

formgroups