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, 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:
<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. 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:
<form *ngIf="patientForm" [formGroup]="patientForm" (ngSubmit)="onSubmit()">
The important part is that the form isn't rendered until its instantiated.
Guys who face issues with reactive formsFirst 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>