We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Validation (Reactive Forms)


I'm struggling with getting validation on the DatePickerComponent to work.

I've been playing around with the e-error/e-success classes and realized the validation (the way I need it - red/green border around the input element and red/green color on the label) only works when adding the class to this:

<div class="e-float-input e-control-wrapper e-input-group e-date-wrapper" _ngcontent-c4 style="width: 100%;">

This is however an element that gets created by <ejs-datepicker></ejs-datepicker>

I was expecting getting it to work with using ngClass on the ejs-datepicker element:

'e-error': createMitarbeiterForm.get('geburtsdatum').touched && !createMitarbeiterForm.get('geburtsdatum').valid,
'e-success': createMitarbeiterForm.get('geburtsdatum').touched && createMitarbeiterForm.get('geburtsdatum').valid

What would you suggest to do?

I might want to additionally show an error message but not neccessarily - I do however want all the input elements to look the same...as stated above

Thanks in advance


1 Reply

DL Deepa Loganathan Syncfusion Team December 4, 2018 05:07 PM UTC

Hi Paul, 

Thanks for contacting Syncfusion support. 

We have investigated your query on EJ2 DatePicker and based on the information provided, we understood that you wish to set the styles of the component and label based on the validation state. 

You can achieve this requirement by using the ng classes like ng-dirty, ng-touched, ng-pristine, ng-valid, ng-invalid etc. being added to the Datepicker based on the validation state of the component.  

Also, you can add your own custom classes using ng-class to the component. For your reference, we have prepared a Reactive forms sample with Datepicker to showcase your requirement.  

In the sample, we have added the classes e-success and e-error to the DatePicker based the component state evaluation using ng-class. Based on the class updated with DatePicker’s wrapper element, the color and border style will get changed. 

/* styles added to change the color and border style based on the state of the element */ 
.ng-touched.e-success.e-control.e-datepicker .e-input-group, 
.ng-touched.e-success.e-control.e-datepicker .e-input-group .e-float-text{ 
color: #4d841d !important; 
border-color: #4d841d !important; 
.ng-touched.e-error.e-control.e-datepicker .e-input-group, 
.ng-touched.e-error.e-control.e-datepicker .e-input-group .e-float-text{ 
color: #d64113 !important; 
border-color: #d64113 !important; 
/* end of custom styles */ 

If this is not your requirement, kindly get back to us by replicating the reported issue in the above sample, so that we can investigate and provide an appropriate solution based on your requirement. 

Deepa L. 

Live Chat Icon For mobile
Up arrow icon