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

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

Your patientForm is undefined until the patient in the subscription is populated. As such, youre trying to bind to a value that doesnt 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:

<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, the patientForm instance will exist and the binding will work. Its a common gotcha when dealing with async values.

Forms dont always have starting 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 isnt rendered until its instantiated.

Problem is that your form is null on the beginning.

And only on ng init you will get patient and then create it. You should initialize your form on the begining or

<section class=CreatePatient *ngIf=patientForm>

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

Guys who face issues with reactive forms
First in your component.ts file make sure you import the following:

import { FormBuilder, FormControl, FormGroup, Validators} from @angular/forms;

export class NewsfeedformComponent implements OnInit {

NewsfeedForm: FormGroup;
constructor(private _formBuilder: FormBuilder){}

 ngOnInit() {

this.lookupService.getStatus().subscribe((status: IStatus) => {
  this.status = status;
});

this.NewsfeedForm = this._formBuilder.group({
  NewsfeedID: [0,null],
  StatusID: [, Validators.required],
  publishdate: [, Validators.required]
  })
 }

}

in your component html file

             <form class=form-container [formGroup]=NewsfeedForm 
#newsFeedform=ngForm (ngSubmit)=form1()>

 <div id=rowTwo fxLayout=row fxLayout.lt-md=column fxLayoutGap=20px fxLayoutGap.lt-md=0px>
                <mat-form-field appearance=outline>
                    <mat-label>Status</mat-label>
                    <mat-select formControlName=StatusID required>
                        <mat-option></mat-option>
                        <mat-option *ngFor=let itemofStatus of status [value]=itemofStatus.StatusID>
                            {{itemofStatus.Status}}
                        </mat-option>
                    </mat-select>
                </mat-form-field>

                <mat-form-field appearance=outline>
                    <input matInput [matDatepicker]=publishdate placeholder=Publish Date
                        formControlName=publishdate>
                    <mat-datepicker-toggle matSuffix [for]=publishdate></mat-datepicker-toggle>
                    <mat-datepicker #publishdate></mat-datepicker>
                </mat-form-field>
            </div>