1

I am really stuck here and I hope you could help me out.

I have the following problem: I have a reactive form with a date, using the ngBootstrap datePicker, and I am using the NgbDateNativeAdapter, so that my datepicker all work with native Dates. All I want is preset the value, like I would with any other form value.

In the template:

<form [formGroup]="myForm">
    <input class="form-control" placeholder="yyyy-mm-dd" formControlName='date'
        ngbDatepicker #d="ngbDatepicker">
</form>

In the component:

this.myForm = this.formBuilder.group({
      date: [dateVariable, [Validators.required]] 
});

Since I am using this in app.modules.ts

providers: [{ provide: NgbDateAdapter, useClass: NgbDateNativeAdapter }]

all datepickers neatly put out native Date objects. I just don't seem to be able to preset the value.

I tried this for testing:

<input class="form-control" placeholder="yyyy-mm-dd" [ngModel]='today'
    ngbDatepicker #d="ngbDatepicker">

and it seems to work with [ngModel], but unfortunately my datepicker is part of a bigger form (this is a minimal example) and I would really appreciate it if I could just set the date.

I have read through quite a number of SO-pages now, many questions seem similar, but they often don't use reactive form or the NgbDateNativeAdapter provider.

Is it possible to set the date, using native dates. Maybe I must somehow tinker some references, my knowledge isn't that advanced yet.

If someone could give me a hint, I'd be so happy.

Jannis Adamek
  • 41
  • 5
  • welcome to SO! you made pretty good job for the first question. looking into the code I can not see what is wrong. is there a chance to provide the stackbtitz with reproduction? – IAfanasov Oct 25 '20 at 06:45
  • the only guess I have is that the `NgbDateNativeAdapter` is provided in a different module from the module with the form – IAfanasov Oct 25 '20 at 06:46

1 Answers1

0

I faced a similar issue. To solve import NgbDateNativeAdapter, NgbDateAdapter from @ng-bootstrap.

import { NgbDateNativeAdapter, NgbDateAdapter } from '@ng-bootstrap/ng-bootstrap';

at the top of your file

Lenzman
  • 1,177
  • 18
  • 30
Bhagyashree kulkarni
  • 13
  • 3