title: How do I use a custom angular-bootstrap's NgbDateParserFormatter on Angular 8?
body: <p>I'm trying to customize the way <a href="https://ng-bootstrap.github.io/#/home" rel="nofollow noreferrer">Angular-Bootstrap</a> datapicker's dates are shown in a form using NgbDateParserFormatter as stated here:</p>
  
  <p><a href="https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter" rel="nofollow noreferrer">https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter</a></p>
  
  <p>I want the date in the class's form field to be year-month-day format and the presentation day/month/year. So I used this code in the component:</p>
  
  <pre><code>&lt;...&gt;
  @Injectable()
  export class CustomAdapter extends NgbDateAdapter&lt;string&gt; {
  
      readonly DELIMITER = '-';
  
      fromModel(value: string | null): NgbDateStruct | null {
          console.log('fromModel start', value);
          if (value) {
              let date = value.split(this.DELIMITER);
              return {
                  day: parseInt(date[0], 10),
                  month: parseInt(date[1], 10),
                  year: parseInt(date[2], 10)
              };
          }
          return null;
      }
  
      toModel(date: NgbDateStruct | null): string | null {
          console.log('toModel start', date);
          let res: string = date ?
              date.year + this.DELIMITER + (date.month + '').padStart(2, "0") + this.DELIMITER + (date.day + '').padStart(2, "0")
              : null;
          console.log('toModel end', res);
          return res;
      }
  }
  
  @Injectable()
  export class CustomDateParserFormatter extends NgbDateParserFormatter {
  
      readonly DELIMITER = '/';
  
      parse(value: string): NgbDateStruct | null {
          console.log('parser start', value);
          if (value) {
              let date = value.split(this.DELIMITER);
              console.log('parser end', date);
              return {
                  day: parseInt(date[0], 10),
                  month: parseInt(date[1], 10),
                  year: parseInt(date[2], 10)
              };
          }
          return null;
      }
  
      format(date: NgbDateStruct | null): string {
          console.log('formatter start', date);
          let res: string = date ?
               (date.day + '').padStart(2, "0") + this.DELIMITER + (date.month + '').padStart(2, "0") + this.DELIMITER + date.year
              : null;
          console.log('formatter end', res);
          return res;
      }
  }
  
  @Component({
      &lt;...&gt;
      providers: [
          { provide: NgbDateAdapter, useClass: CustomAdapter },
          { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
      ]
  })
  export class MyComponent implements OnInit {
      myForm: FormGroup;
      &lt;...&gt;
      dpModel: any;
  
      constructor(
          &lt;...&gt;
          private ngbCalendar: NgbCalendar,
          private dateAdapter: NgbDateAdapter&lt;string&gt;
      ) {
          this.myForm = this.formBuilder.group({
              &lt;...&gt;
              date: [''],
              &lt;...&gt;
          });
      }
  </code></pre>
  
  <p>and this one in the template:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      &lt;label for="data" class="col-form-label"&gt;Date:&lt;/label&gt;
      &lt;div class="input-group"&gt;
        &lt;input class="form-control" placeholder="dd/mm/yyyy"
              name="data" [(ngModel)]="dpModel" 
  
              ngbDatepicker #d="ngbDatepicker" formControlName="data"&gt;
        &lt;div class="input-group-append"&gt;
             &lt;button class="btn btn-outline-secondary fa fa-calendar-alt" (click)="d.toggle()"&gt;&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When I click on a date inside datepicker, this is the output from the debugs I included in the code:</p>
  
  <pre><code>toModel start NgbDate {year: 2020, month: 6, day: 18}
  toModel end 2020-06-18
  fromModel start 2020-06-18
  formatter start null
  formatter end null
  toModel start null
  toModel end null
  fromModel start null
  fromModel start 2020-06-18
  </code></pre>
  
  <p>Why is the component passing null to the formatter ? Also a red line appears bellow the datepicker after I choose the date.</p>
  
  <p>In the code above I'm using <code>[(ngModel)]="dpModel"</code> as a test. What I really want is to use myform.date. But I have already tryed <code>[(ngModel)]="myForm.date"</code> and tried to remove it completely.</p>
  
  <p>I'm using Angular 8</p>