formbuilder angular 9 - problem with date validator

I have a task to divided 2 message for datetime input:

• Date is require
• Out of date (like 30/02/2023 is not a valid date)

But the problem is when I use validator with formbuilder. The date return is validate before I click on the button submit. So when I click on the submit button the date always return null if it not valid (it mean I can not set 2 different condition because 2 condition is the same null value). So I can not setError for 2 message control in formbuilder when click on submit button.

Library

import * as dateFormat from "dateformat";

.ts

    updateForm: FormGroup;

  constructor(
    private fb: FormBuilder) { }

  createForm() {
    let now = new Date();
    this.updateForm = this.fb.group({
      date: [
        dateFormat(now, "yyyy-mm-dd"),
        [Validators.required],
      ],

    });
  }

  ngOnInit(): void {
    this.createForm()
  }

  onSubmit() {
    console.log(this.updateForm.value.date)
    //alway null if date not valid
  }

.html

<input type="date" class="form-control input is-primary" formControlName="ngayApDung"
    [ngClass]="{ 'is-invalid': submitted && f.date.errors }" cdkFocusInitial />
<div *ngIf="submitted && f.date.errors" class="help is-danger">
    <div *ngIf="f.date.errors.required" translate>
        date is required
    </div>
</div>

The HTML input element has a validityState class with many attributes.
The badInput attribute is true when you put a wrong date.

So you can achieve what you want by adding an extra helper function:

Firstly add a new helper variable

badInput: boolean = false;

Form has only the required Validation

let now = new Date();
this.updateForm = new FormGroup({
      date_new: new FormControl(now, [
        Validators.required,
      ]),
    });

add a new helper function

check(e: any){
  const target = e.target as HTMLInputElement;
  if (target.validity.badInput){
    this.badInput = target.validity.badInput 
  }
  else{
    this.badInput = false
  }
}

html

<input
      type="date"
      class="form-control input is-primary"
      formControlName="date_new"
      [(ngModel)]="now"
      cdkFocusInitial
      formtarget="date : 'yyyy-MM-dd'"
      (keyup)="check($event)"
      />

  <div *ngIf="updateForm.controls['date_new'].errors && !badInput">Please enter a date
</div>
  <div *ngIf="updateForm.controls['date_new'].errors && badInput">Invalid date
</div>

You need updateForm.controls['date_new'].errors to display divs only on errors and the badInput changes after the change of the HTMLInputElement