Angular 2: formGroup expects an instance of FormGroup. Please transfer

Question

I am creating a form in Angular 2. My goal is to get data from the API and pass it to the form for editing purposes. However, I ran into this error:

EXCEPTION: Not available (in promise): Error: error. / EditPatientComponent class EditPatientComponent - built-in template: 1:10, called: formGroup expects an instance of FormGroup. Please go alone.

Here is the current error code.

HTML

<section class="CreatePatient"> <form [formGroup]="patientForm" (ngSubmit)="onSubmit()"> <div class="row"> <div class="form-group col-12 col-lg-3"> <label for="firstName">First Name</label> <input formControlName="firstName" type="text" class="form-control" id="firstName" > </div> <div class="row"> <div class="col-12 col-lg-2"> <button type="submit" name="submit" class="btn btn-block btn-primary">Save</button> </div> </div> </form> </section> 

c

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { FormBuilder, FormGroup, FormControl } from '@angular/forms'; import { PatientService } from './patient.service'; import { Patient } from './patient'; @Component({ templateUrl: 'editpatient.component.html' }) export class EditPatientComponent implements OnInit { errorMessage: string; id: string; editMode = true; private patientForm: FormGroup; private patient: Patient; constructor( private patientService: PatientService, private router: Router, private activatedRoute: ActivatedRoute, private formBuilder: FormBuilder) { console.log("routes"); console.log(activatedRoute.snapshot.url[1].path); } ngOnInit() { this.getPatient(); } getPatient() { this.patientService.getPatient(this.activatedRoute.snapshot.url[1].path) .subscribe( patient => { this.id = this.activatedRoute.snapshot.url[1].path; this.patient = patient; this.initForm(); }, error => this.errorMessage = <any>error); } onSubmit(form){ console.log(this.patientForm); // Post the API }; initForm() { let patientFirstName = ''; if (this.editMode) { console.log(this.patient.firstName); console.log(this.patient.lastName); console.log(this.patient.participantUuid); patientFirstName = this.patient.firstName; } this.patientForm = new FormGroup({ 'firstName': new FormControl(patientFirstName) }) }; } 

Any help / pointing me in the right direction would be great! Thanks!

Answer 1

Your patientForm not undefined until the patient in the subscription is filled. Thus, you are trying to bind a value that does not exist in the template while parsing the template.

Add *ngIf to visualize the form only if the patient is true or a group of forms is created:

 <section class="CreatePatient"> <form *ngIf="patient" [formGroup]="patientForm" (ngSubmit)="onSubmit()"> <div class="row"> <div class="form-group col-12 col-lg-3"> <label for="firstName">First Name</label> <input formControlName="firstName" type="text" class="form-control" id="firstName" > </div> <div class="row"> <div class="col-12 col-lg-2"> <button type="submit" name="submit" class="btn btn-block btn-primary">Save</button> </div> </div> </form> </section> 

When the patient is populated in the subscription, a patientForm instance will exist and the binding will work. This is a common “error” when working with asynchronous values.

Forms do not always have initial values, so you can also check for the existence of the form itself:

 <form *ngIf="patientForm" [formGroup]="patientForm" (ngSubmit)="onSubmit()"> 

The important part is that the form is not displayed until it is created.

Answer 2

The problem is that your form at the beginning is zero.

And only on ng init you get the patient, and then create it. You must initialize your form at the beginning or

 <section class="CreatePatient" *ngIf="patientForm">