Datepicker not picking up validation styles (Timepicker has


Topic: Datepicker not picking up validation styles (Timepicker has no problem)

Dave Moniz pro premium priority asked 4 months ago

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' })
});

Arkadiusz Idzikowski staff commented 4 months ago

@Dave Moniz We will take a closer look at this problem. Unfortunately, I'm afraid there is no easy workaround for now, we will need to fix the directive form control value accessor on our end.


Dave Moniz pro premium priority commented 4 months ago

Thank you... interesting to note: while the timepicker does pick up the styles, it doesn't seem to lose them correctly on formgroup.reset();


Dave Moniz pro premium priority commented 4 months ago

I suspect it's having difficulty because of setting the default value with [value]


Arkadiusz Idzikowski staff commented 4 months ago

@Dave Moniz Thank you for the additional information. We think that we already found the cause of these problems and they should be fixed in the next update.


Dave Moniz pro premium priority commented 4 months ago

Awesome! Thanks!


Dave Moniz pro premium priority answered 4 months ago

Can confirm this has been fixed as of MDB5 1.0.0.

Closing now.


Status

Closed

Specification of the issue
  • User: Pro
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: No
  • Provided link: No