Issue
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:
EXCEPTION: Uncaught (in promise): Error: Error in ./EditPatientComponent class EditPatientComponent - inline template:1:10 caused by: formGroup expects a FormGroup instance. Please pass one in.
Here is the current code with the error.
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>
ts
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!
Solution
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.
Answered By - Brandon Taylor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.