Datepicker does not reset when the form/input is reset

The date should be cleared from the datepicker field when I reset its input field. The date will stay in the input field but the value the FormControl returns will be null. I tried to reset the date manually with the viewchild of the datepicker in the typescript code like this but I just the error message TypeError: Cannot read property 'getDay' of null.

component.html

<input [mdbDatepicker]="datepicker" type="text" [formControl]="dayInput" class="form-control" id="surcharge-day" placeholder="dd.mm.yyyy" (click)="datepicker.open()"/> <mdb-datepicker-toggle [mdbDatepicker]="datepicker"></mdb-datepicker-toggle> <mdb-datepicker #datepicker [options]="translationOptions" [inline]="true" [format]="'dd.mm.yyyy'"></mdb-datepicker>

component.ts

```

@Component({ selector: 'app-component', templateUrl: './component.html' }) export class Component implements OnInit {

@ViewChild('datepicker') datepicker; dayInput: FormControl; translationOptions = mdDatepickerTranslationOptions;

constructor(private formBuilder: FormBuilder) {}

ngOnInit(): void { this.addSurchargedayInput = this.formBuilder.control(null, Validators.required); }

add(): void { this.dayInput.reset(); this.datepicker._selectDate(null); } }

```

Please help me, I really need this to work