How to ensure load observable data before rendering reactive form in angular

Question

I am working on reactive form, form-group in Angular 5 application. I am getting data via API that subscribe with observable. My issue is my formGroup try to load data while is not there and throw exception. I need to ensure loadData() load data before formGroup initialise.

Component

export class QuestionsComponent implements OnInit {

@Input() questions: QuestionBase<any>[] = [];
@Input() questionsList: QuestionBase<any>[] = [];
@Input() questionsMappedList: QuestionBase<any>[] = [];
form: FormGroup;

private view: BehaviorSubject<QuestionsDataModel>;
private consultationQuestions: QuestionsDataModel;

constructor(private dataService: QuestionsDataService, private router: Router, private session: SessionStorageService, private qcs: QuestionControlService, private questionService: QuestionMappingService) {

  }

ngOnInit(): void {
    this.view = new BehaviorSubject<QuestionsDataModel>(null);
    this.loadData();
    this.questions = this.questionService.getQuestions();
    //this.questions = this.questionService.getQuestionList(null);
     this.form = this.qcs.toFormGroup(this.questions); 
}

public loadData():void
{

    //filtersLoaded: Promise<boolean>;

  var consultationId = this.session.getItem('consultationId');

   this.dataService.getQuestions(consultationId)
   .subscribe(data =>{
     debugger;
        this.view.next(data);
        this.questionsList = this.questionService.getQuestionList(data);
        console.log("dynamic questionsList...", this.questionsList);

   });
}

template

<div>
    <form (ngSubmit)="onSubmit()" [formGroup]="form">

      <div *ngFor="let question of questions" class="form-row">
        <app-question [question]="question" [form]="form"></app-question>
      </div>

      <div class="form-row">
        <button type="submit" [disabled]="!form.valid">Save</button>
      </div>
    </form>

    <div *ngIf="payLoad" class="form-row">
      <strong>Saved the following values</strong><br>{{payLoad}}
    </div>
 </div>

Answer 1

Add a boolean condition on ngOnInit..

private formData = false;

Then inside your loadData function do...

loadData() {

            this.formData = true;

Then in your template do..

<form *nGIf='formData'>

Or simply do..

<form *nGIf='myFormDataVariables' >

Answer 2

You should initialize form in ngOnInit and then update its values after API call.

ngOnInit(): void {
    this.view = new BehaviorSubject<QuestionsDataModel>(null);
    this.loadData();
    this.questions = this.questionService.getQuestions();
    this.form = this.formBuilder.group({
      sampleProperty: '',
      // init form values
    });
}

---

public loadData(): void {
  var consultationId = this.session.getItem('consultationId');

   this.dataService.getQuestions(consultationId)
   .subscribe(data =>{
     debugger;
        this.view.next(data);
        this.questionsList = this.questionService.getQuestionList(data);

        this.form = this.qcs.toFormGroup(this.questions); 
   });
}