Validation (Reactive Forms)

[Paul Kocher]

Hi!

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:

[ngClass]="{

'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

Paul

[Deepa Loganathan]

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.  

Sample: https://stackblitz.com/edit/angular-6l8t67-djyejs?file=formsupport.css   

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. 

Regards,  

 

Deepa L.