DateTimePicker form validity not working properly

[mikerodonnell89]

Bug. Set up the DateTimePicker to get its data from a FormControl. Touched/dirty does not function properly, console errors

<form [formGroup]="customForm">
    <fd-datetime-picker formControlName="date"></fd-datetime-picker>
</form>

Touched: {{customForm.controls.date.touched}}<br/>
Dirty: {{customForm.controls.date.dirty}}<br/>

Selected Date: {{ customForm.controls.date.value.date ? customForm.controls.date.value.date.toDateString() : 'null' }}

and

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-datetime-example',
  templateUrl: './datetime-example.component.html'
})
export class DatetimeExampleComponent {
    customForm = new FormGroup({
        date: new FormControl({ date: null })
    });
}

results in console errors. Expected behavior should be the same as date picker

[JKMarkowski]

To avoid errors you need to switch date: new FormControl({ date: null }) to date: new FormControl(null), in your example you initialise object instead of date, this one resolves dirty and changes are detected.

For touched : '(blur)': this.onTouched() I think the main problem here is the fact, that focus/focusout/blur events are fired only on specified html elements like a, input or buttons. I think the best solution here would be to change event that calls onTouched() function. For example every time calendar closes, then onTouched should be called, or change (blur) to (click) What do you think about it ?