I am currently working on a project using Angular 6 to create a web page that includes a form with a dropdown menu for selecting projects. The dropdown menu is populated by data fetched from a REST API call. Surprisingly, everything works perfectly when I hardcode the data and test the form without subscribing to any data. However, when I incorporate the REST API call and attempt to build the form within the subscribe method, I encounter a FormGroup error in the console multiple times:
ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
I suspect this issue might be related to asynchronous calls. Is there something wrong with using subscribes?
While researching a solution, I came across this post, but unfortunately, the proposed solution did not work for me as it only removed the form instead.
Please Note: I have implemented similar functionalities in other pages before and did not encounter such problems.
component.ts
import { Component, OnInit, ViewChild, ViewContainerRef, AfterContentInit } from '@angular/core';
import { Location } from '@angular/common';
import { TranslatePipe } from 'src/app/pipes/translate/translate.pipe';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { DynamicTextFieldService } from 'src/app/services/dynamic-loading/dynamic-text-field/dynamic-text-field.service';
import { DynamicDropdownService } from 'src/app/services/dynamic-loading/dynamic-dropdown/dynamic-dropdown.service';
import { DynamicTextAreaService } from 'src/app/services/dynamic-loading/dynamic-text-area/dynamic-text-area.service';
import { CustomSearchService } from 'src/app/services/search/custom-search/custom-search.service';
@Component({
selector: 'app-knowledge-base-create',
templateUrl: './knowledge-base-create.component.html',
styleUrls: ['./knowledge-base-create.component.scss']
})
export class KnowledgeBaseCreateComponent implements OnInit, AfterContentInit {
@ViewChild('f1', { read: ViewContainerRef }) f1;
@ViewChild('f2', { read: ViewContainerRef }) f2;
@ViewChild('f3', { read: ViewContainerRef }) f3;
@ViewChild('f4', { read: ViewContainerRef }) f4;
kbForm: FormGroup;
projectsList: any;
constructor(private location: Location,
private translate: TranslatePipe,
private dynamictextfield: DynamicTextFieldService,
private fb: FormBuilder,
private dynamicdropdown: DynamicDropdownService,
private dynamictextarea: DynamicTextAreaService,
private search: CustomSearchService) { }
ngOnInit() {
this.search.searchCall("PP_1_Projects", "", "", true).subscribe(
response => {
response = response.records;
this.projectsList = response;
this.buildForm();
},
error => {
console.log(error);
}
);
}
...
}
component.html
<div>
<app-toolbar></app-toolbar>
<app-side-nav></app-side-nav>
<div class="container-fluid">
<app-button description="{{ 'pages[knowledge_base][buttons][go_back]' | translate }}" class="btn btn-danger btn-md custom" (callFunction)="goBack()"></app-button>
<div class="card-group">
<div class="card p-4">
<form [formGroup]="kbForm">
<h2 class="col-md-6">Create New Knowledge Base Article</h2>
<div class="col-md-3">
<div #f1 class="input"></div>
<div #f2 class="input"></div>
<div #f3 class="input"></div>
</div>
<div class="col-md-6">
<div #f4 class="input"></div>
</div>
</form>
</div>
</div>
</div>
</div>