如何在angular 8上使用自定义angular引导的NgbDateParserFormatter?

Angular-Bootstrap 数据采集器的日期以使用NgbDateParserFormatter的形式显示,如下所述:

https://ng-bootstrap.github.io/#/components/datepicker/examples#adapter

<...>
@Injectable()
export class CustomAdapter extends NgbDateAdapter<string> {

    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({
    <...>
    providers: [
        { provide: NgbDateAdapter, useClass: CustomAdapter },
        { provide: NgbDateParserFormatter, useClass: CustomDateParserFormatter }
    ]
})
export class MyComponent implements OnInit {
    myForm: FormGroup;
    <...>
    dpModel: any;

    constructor(
        <...>
        private ngbCalendar: NgbCalendar,
        private dateAdapter: NgbDateAdapter<string>
    ) {
        this.myForm = this.formBuilder.group({
            <...>
            date: [''],
            <...>
        });
    }

模板中的这个:

<div class="form-group">
    <label for="data" class="col-form-label">Date:</label>
    <div class="input-group">
      <input class="form-control" placeholder="dd/mm/yyyy"
            name="data" [(ngModel)]="dpModel" 

            ngbDatepicker #d="ngbDatepicker" formControlName="data">
      <div class="input-group-append">
           <button class="btn btn-outline-secondary fa fa-calendar-alt" (click)="d.toggle()"></button>
      </div>
    </div>
</div>

当我单击datepicker中的日期时,这是我在代码中包含的调试的输出:

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

为什么组件将null传递给格式化程序?在我选择日期后,日期选择器下方还会出现一条红线。

[(ngModel)]="dpModel" 作为测试。我真正想要的是使用myform.date。但我已经试过了 [(ngModel)]="myForm.date" 并试图将其完全移除。