I've set up a date picker with an input field and pop-up following the instructions found here:
This is what I have:
1) The necessary imports are all in the template:
<input id="field_completed" [(ngModel)]="endDate" type="text" class="form-control" name="completed" formControlName="completed" placeholder="YYYY-MM-DD" ngbDatepicker #ended="ngbDatepicker" (click)="ended.toggle()" (dateSelect)="addEndDateAutomatically()"/>
2) There's a function that retrieves the selected endDate value from the model of NgbDateStruct, extracts its day/month/year, and then updates my DTO to be sent to the server.
I'm puzzled about why I encounter the error below only when using ngbDatepicker in the template but not when it's excluded:
main.99b988e9722c4de65a1a.bundle.js:1 ERROR Error: formControlName must be used with a parent formGroup directive. You'll want to add a formGroup
directive and pass it an existing FormGroup instance (you can create one in your class).
Example:
<div [formGroup]="myGroup">
<input formControlName="firstName">
</div>
In your class:
this.myGroup = new FormGroup({
firstName: new FormControl()
});
at Function.l.controlParentException (main.99b988e9722c4de65a1a.bundle.js:1)
at n._checkParentType (main.99b988e9722c4de65a1a.bundle.js:1)
at n._setUpControl (main.99b988e9722c4de65a1a.bundle.js:1)
at n.ngOnChanges (main.99b988e9722c4de65a1a.bundle.js:1)
at main.99b988e9722c4de65a1a.bundle.js:1
at main.99b988e9722c4de65a1a.bundle.js:1
at Aw (main.99b988e9722c4de65a1a.bundle.js:1)
at sx (main.99b988e9722c4de65a1a.bundle.js:1)
at Object.updateDirectives (main.99b988e9722c4de65a1a.bundle.js:1)
at Object.updateDirectives (main.99b988e9722c4de65a1a.bundle