Angular 2: formGroup expects a FormGroup instance. Please pass one in

Question

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

Answer 1

Your patientForm is undefined until the patient in the subscription is populated. As such, you're trying to bind to a value that doesn't exist in the template at the time the template is parsed.

Add an *ngIf to render the form only when patient is truthy, or the form group is instantiated:

    

        

            

                First Name
                
            

        

            

                Save
            
        
    

When the patient is populated in the subscription, the patientForm instance will exist and the binding will work. It's a common "gotcha" when dealing with async values.

Forms don't always have starting values, so you can also check for the existence of the form itself:

The important part is that the form isn't rendered until its instantiated.