How to Handle Incomplete Date Entries in Angular Form Control with <input type="date">?

I'd like to warn my users if they enter an incomplete date. The field is not required though

I tried listening to the changes of the field using the (blur) / (keyup) attributes, but if the date is not complete, it's value is an empty string.

<input type="date" formControlName="modifiedSinceDate" (keyup)="keyup($event)" (blur)="onBlur($event)"/>

onBlur(event: Event) {
const inputElement = event.target as HTMLInputElement;
const rawValue = inputElement.value;
console.log(rawValue);
console.log(this.triggerForm.get('allPersons.modifiedSinceDate')?.value);
}

keyup(event: KeyboardEvent): void {
const inputElement = (event.target as HTMLInputElement);
const rawValue = inputElement.value;
console.log("keyup")
console.log(rawValue);
console.log(this.triggerForm.get('allPersons.modifiedSinceDate')?.value);
}


I also tried my luck using a custom value accessor but unless I enter a complete date, the onInput method doesn't get triggered.

Does anyone have an idea how to fix this?

Continue reading...