如何在formGroup中将API中的数据绑定到ng-bootstrap Datepicker

<div class="form-group">
  <label for="datepicker">选择日期</label>
  <input id="datepicker" class="form-control" placeholder="yyyy-mm-dd" name="datepicker" [formControl]="formGroup.controls['datepicker']" ngbDatepicker #dp="ngbDatepicker">
  <button (click)="dp.toggle()" class="btn btn-outline-secondary calendar-btn" type="button"></button>
</div>

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  formGroup: FormGroup;

  ngOnInit() {
    this.formGroup = new FormGroup({
      datepicker: new FormControl()
    });
  }
}

import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
import { ApiService } from './api.service';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  formGroup: FormGroup;
  apiData: any;

  constructor(private apiService: ApiService) {}

  ngOnInit() {
    this.formGroup = new FormGroup({
      datepicker: new FormControl()
    });

    this.apiService.getData().subscribe(data => {
      this.apiData = data;
      this.formGroup.patchValue({
        datepicker: this.apiData.date
      });
    });
  }
}