Expected behavior

Both datepicker and timepicker <input>s should pick up the validation styles since they're both <input>s

Actual behavior

Only timepicker does it successfully

Resources (screenshots, code snippets etc.)

HTML

<div class="row">
    <div class="col-xl-7">
        <mdb-form-control class="input-field">
            <input mdbInput [mdbValidate]="true" id="scheduleDatePicker" name="scheduleDatePicker" formControlName="dateControl"
                [mdbDatepicker]="scheduleDatePicker" type="text" [required]="true" class="form-control" (click)="scheduleDatePicker.open()">
            <label mdbLabel for="scheduleDatePicker" class="form-label">Date</label>
            <mdb-datepicker-toggle [mdbDatepicker]="scheduleDatePicker"></mdb-datepicker-toggle>
            <mdb-datepicker #scheduleDatePicker [format]="'mmm d, yyyy'" [startDate]="mmrm.date"></mdb-datepicker>
            <mdb-error *ngIf="(dateControl?.invalid && (dateControl?.dirty || dateControl?.touched))">You must select at least one</mdb-error>
            <mdb-success *ngIf="dateControl?.valid && (dateControl?.dirty || dateControl?.touched)"></mdb-success>
        </mdb-form-control>
    </div>
    <div class="col-xl-5">
        <mdb-form-control class="input-field">
            <input mdbInput [mdbValidate]="true" id="scheduleTimepicker" name="scheduleTimepicker" formControlName="timeControl"
                [mdbTimepicker]="scheduleTimepicker" type="text" [required]="true" class="form-control" [value]="mmrm.time" (click)="scheduleTimepicker.open();">
            <label mdbLabel for="scheduleTimepicker" class="form-label">Time</label>
            <mdb-timepicker-toggle [mdbTimepickerToggle]="scheduleTimepicker"></mdb-timepicker-toggle>
            <mdb-timepicker #scheduleTimepicker></mdb-timepicker>
            <mdb-error *ngIf="(timeControl?.invalid && (timeControl?.dirty || timeControl?.touched))">You must select at least one</mdb-error>
            <mdb-success *ngIf="timeControl?.valid && (timeControl?.dirty || timeControl?.touched)"></mdb-success>
        </mdb-form-control>
    </div>
</div>

TS

get dateControl(): AbstractControl { return this.mmrFormGroup.get('dateControl')!; }
get timeControl(): AbstractControl { return this.mmrFormGroup.get('timeControl')!; }

this.formGroup = new FormGroup({
    dateControl: new FormControl(new Date(), { validators: [Validators.required], updateOn: 'blur' }),
    timeControl: new FormControl(moment().format('h:mm A'), { validators: [Validators.required], updateOn: 'blur' })
});