angulartypescriptdatepickerbootstrap-datepickerngb-datepicker

Error: "formControlName must be used with a parent formGroup directive." for <input ngbDatepicker #e="ngbDatepicker" (click)="e.toggle()">

I have a date picker with the input field and pop-up configured as described there: https://ng-bootstrap.github.io/#/components/datepicker/overview

So, I have

1) tag with all needed imports done 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) have the handler function, that picks up the endDate value from the model of NgbDateStruct, takes its day/month/year and puts to my DTO to be sent to the server

I can't understand, why I'm getting the below error only when I have ngbDatepicker used in template, but not when it is 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
Solution

  • it is no longer reproduced as I have removed formControlName="completed" from there and only [(ngModel)] left