I have created a form for adding users, which includes fields to input their birthdate.
this.userFG = this.formBuilder.group({
name: [""],
family: [""],
birthDate: this.formBuilder.group({
day: [""],
month: [""],
year: [""]
})
});
When implementing it in the HTML file, I use the following:
<form [formGroup]="userFG">
<div>
<label>Name : </label>
<input formControlName="name">
</div>
<div>
<label>lastName : </label>
<input formControlName="family">
</div>
<div [formGroup]="birthDate">
<div>
<label>day : </label>
<input formControlName="day">
</div>
<div>
<label>month : </label>
<input formControlName="month">
</div>
<div>
<label>year : </label>
<input formControlName="year">
</div>
</div>
</form>
After running the project, an error message is displayed:
formGroup expects a FormGroup instance. Please pass one
You can see a demo of the issue here.
What could be causing this problem and how can it be resolved?