I am using Angular 9 & ngx-bootstrap 5.6.1. https://valor-software.com/ngx-bootstrap/#/components/timepicker?tab=overview#form Here is my component code:

export class TournamentCreationComponent implements OnInit {
    ...
    ngOnInit(): void {
        this.tournamentTypeForm = this.formBuilder.group({
          ...
          tournamentStartTime: new FormControl(),
          ...    
        }); 
    }
    ...
}

Here is my template:

    <form  [formGroup]="tournamentTypeForm" (ngSubmit)="template(tournamentTypeForm.value)"> 
    <div class="content">
    <div class="form-group row">
     <label for="tournamentStartTime" class="col-sm-3 col-form-label">Start Time</label>
     <div class="col-sm-9">
         <ng-template #popTemplate>
            <timepicker [(ngModel)]="tournamentStartTime" [showMeridian]="true"></timepicker>
          </ng-template>
          <input [(ngModel)]="tournamentStartTime"  [popover]="popTemplate" 
                 [outsideClick]="true" placement="bottom"  class="form-control"/>                   
      </div>               
</div>
</div>
</form>

I am getting this error:

ngModel cannot be used to register form controls with a parent formGroup directive.  Try using
formGroup's partner directive "formControlName" instead.  Example:
  
<div [formGroup]="myGroup">
  <input formControlName="firstName">
</div>

In your class:

this.myGroup = new FormGroup({
   firstName: new FormControl()
});

  Or, if you'd like to avoid registering this form control, indicate that it's standalone in ngModelOptions:

  Example:

  
<div [formGroup]="myGroup">
   <input formControlName="firstName">
   <input [(ngModel)]="showMoreControls" [ngModelOptions]="{standalone: true}">
</div>

at Function.modelParentException (forms.js:6653)
at NgModel._checkParentType (forms.js:7086)
at NgModel._checkForErrors (forms.js:7072)
at NgModel.ngOnChanges (forms.js:6967)
at NgModel.wrapOnChangesHook_inPreviousChangesStorage (core.js:27137)
at callHook (core.js:4739)
at callHooks (core.js:4699)
at executeInitAndCheckHooks (core.js:4639)
at refreshView (core.js:11963)
at refreshDynamicEmbeddedViews (core.js:13335)

From this error message I understand because my tournamentStartTime is a form control, part of a form group it is not working. I tried to replace [(ngModel)] with formControlName at both places. If I do that, errors in the console go away, but the time picker's time does not get captured in the input field.