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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Validation (Reactive Forms)

Thread ID:





141269 Dec 3,2018 01:49 PM UTC Dec 4,2018 05:07 PM UTC Angular - EJ 2 1
Tags: DatePicker
Paul Kocher
Asked On December 3, 2018 01:49 PM UTC


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


Deepa Loganathan [Syncfusion]
Replied On 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. 


This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon