bsDatepicker using formControlName-angular 2+

Question

I am working with this example: https://valor-software.com/ngx-bootstrap/#/datepicker#reactive

HTML

     <form class="clearfix" [formGroup]="projectFormGroup">  
       <label for="targetDate" class="col-form-label">Target Date</label>
       <input type="text"
            placeholder="Datepicker"
            class="form-control"
            bsDatepicker
            [bsConfig]="{ adaptivePosition: true }" formControlName="targetDate">
     </form>

When I checked the value using <pre><pre>{{ projectFormGroup?.value | json }}</pre></pre> , the output is,

{
 "targetDate": "2020-02-18T04:55:34.000Z"
 }

Actually, I am trying for update data. The value coming from API is like 2020/02/18 04:55. I need to show the date which coming from Api in bsDatepicker.

For example,

In ts,

 this.projectFormGroup.patchValue({
          targetDate:project.targetDate
  });

Problem: When I use this method for any text values like name, its showing automatically in formControlName.Same way I need to show in bsDatepicker.

How I will show the value automatically from Api in below ,

Answer 1

You have to convert the result string to date

Try this:

this.projectFormGroup.patchValue({
          targetDate:new Date('project.targetDate')
});