ngbDatepicker in Angular Reactive Form

Question

I using ngbDatepicker in reactive form where I am trying to set the value of the control after fetching from a service. In the code below the value of title is getting assigned , but the value of startDate is not getting assigned even though the object has it and the pipe returns it. I referred to the previous posts but couldn't solve. Any help is appreciated. Thanks

.HTML

 <form [formGroup]="editForm" (ngSubmit)="onSubmit()" *ngIf="editForm">
    
     <input type="text" formControlName="title" class="form-control" />

    <input class="form-control" placeholder="mm/dd/yyyy"  formControlName="startDate" 
     ngbDatepicker #d="ngbDatepicker" (click)="d.toggle()"  > 

</form>

.TS

private setEditForm() {  
  this.editForm = this.formBuilder.group({
   Id: [this.MyObject.Id],
   title: [this.MyObject.title, Validators.required],    
   startDate: [this.datepipe.transform(this.MyObject.startDate, 'yyyy-MM-dd'), Validators.required]
      
  });

Bansi29 Bansi29 · Accepted Answer · 2021-10-25T11:50:54

try below way i hope it work for you

ngOnInit(){
  this.editForm.get('startDate').setValue({
      year: parseInt(startDate.format('YYYY'), 10),
      month: parseInt(startDate.format('M'), 10),
      day: parseInt(startDate.format('D'), 10)
  });
}

ngbDatepicker in Angular Reactive Form

1 Answers