What is the correct way to use ngx-bootstrap datepicker?

Question

I have an array of "field" objects I want to render. When the field.type is date I want to render a ngx-bootstrap/datepicker field. My JSON object for the date field looks like this:

{
"field": {
  "name": "date_of_occurrence",
  "label": "Date of occurrence",
  "valueType": "date",
  "type": "custom",
  "settings": {
     "required": false
  },
  "organisation": 1,
 },
 "size": 4
}

I am trying to render it like this:

<form *ngIf="complexForm" name="form" (ngSubmit)="complexForm.valid && send()" [formGroup]="complexForm" novalidate>

<div *ngIf="fieldValue.field.valueType == 'date'" class="form-group">
    <label>{{fieldValue.field.label}}:</label>
    <div class="input-group">
        <input [required]="fieldValue.field.settings.required" type="text" id="complexForm.controls[fieldValue.field.name]" class="form-control date-input" bsDatepicker [(ngModel)]="fieldValue.value">
        <label for="complexForm.controls[fieldValue.field.name]" class="input-group-btn btn btn-primary" (click)="dp.toggle()"><i class="fa fa-calendar" aria-hidden="true"></i></label>
        <span style="display: inline-block">                
            <datepicker #dp [(ngModel)]="fieldValue.value" style="display: block"></datepicker>
        </span>
    </div>
</div>

</form>

But I get this error:

ngModel cannot be used to register form controls with a parent formGroup directive. Try using formGroup's partner directive "formControlName" instead.

I see that the datepicker example uses a "bsValue" to bind to, but I dont want hardcode this as my component simple renders whatever "field" that is in the array and should bind the value back to the value property of that array. Until saved the first time the value property does not exist.

What am I doing wrong?