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

Dave Moniz priority asked 2 years 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 2 years 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 priority commented 2 years 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 priority commented 2 years ago

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


Arkadiusz Idzikowski staff commented 2 years 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 priority commented 2 years ago

Awesome! Thanks!


Dave Moniz priority answered 2 years ago


Can confirm this has been fixed as of MDB5 1.0.0.

Closing now.


FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Closed

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: MDB5 1.0.0-beta5
  • Device: PC
  • Browser: Google Chrome
  • OS: Arch Linux
  • Provided sample code: Yes
  • Provided link: No