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

Angular Email Validator


I have Syncfusion grid and email column and I need to add Angular email validator to it. It is a template driven form so I am using <input type="email" name="email" [email]="true"> as mentioned in below link.


A. Syncfusion grid control - template driven form
<ejs-grid #grid id='{{data.id}}' [dataSource]='data.content' [pageSettings]='pageSettings' [allowSorting]="true" [editSettings]='editSettings'
                                       [toolbar]='toolbar' height='100%' (actionBegin)='actionBegin($event)' (toolbarClick)="onToolbarClick($event, grid)">
                                     <e-column field='notificationId' [visible]='false' isPrimaryKey="true" isIdentity="true">e-column>
                                     <e-column field='firstName' headerText='First Name' width='140' [validationRules]="firstNameRules" [edit]="nameEditCell">e-column>
                                     <e-column field='lastName' headerText='Last Name' width='140' [validationRules]="lastNameRules" [edit]="nameEditCell">e-column>
                                     <e-column field="email" headerText="Email" width='140'>
                                         <ng-template #editTemplate let-data>
                                             <input id="email" name="email" type="email" class="e-field e-input"
                                                    aria-labelledby="grid" [(ngModel)]="data.email" [email]="true" />
                                     <e-column field="processType" [visible]='false' defaultValue="{{data.header}}">e-column>

B. It is not a grid and is model-driven form.
There are Add/edit screens in my application that do not have grid and are model driven forms. We use Validators.Email Angular email validator on these screens.
 emailAddress: this.formBuilder.control(this.household.emailAddress, { validators: Validators.email }),
We want to be consistent with email validation rules across the application.
But we noticed that if we enter this in email field "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa123@aaaa88aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaatest.cooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooom"
Sync fusion grid template driven form returns this as invalid email but model-driven form that use Validators.email return this as valid email. In both cases I am using Angular Email validator but not sure why validation rules differ.

Please let me know.

6 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team January 2, 2020 04:41 PM UTC

Hi Pavani, 

Our form validator currently supports for maximum of 5 characters after the dot in email validation. If you need to type more characters then you can achieve it by adding custom rule for the form’s email validation in the grid’s actionComplete event as given below, 

customFn(args: { [key: string]: string }) { 
      // Regex for the required condition 
      let emailRgx = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]*$/; 
      return emailRgx.test(args["value"]); 
// Grid’s actionComplete event function 
actionComplete(args: DialogEditEventArgs): void { 
      if (args.requestType === 'beginEdit') { 
            // Add custom rule for the ‘CustomerMail’ column 
            args.form.ej2_instances[0].addRules('CustomerMail', {email: [this.customFn, 'Enter valid email address']}); 

We have prepared a sample based on this for your reference which you can find below, 

Thavasianand S. 

PK Pavani Kothapalli January 3, 2020 12:33 AM UTC


Thank you for your reply.

I added custom rule for email validation. The regular expression that you sent is working for email that I mentioned in below thread but other emails that are valid by Angular Email Validator are not working. Our requirement is to use built-in Angular email validator so that validation rules will be consistent on all screens in application. For now I added below regular expression that is mentioned in below link. 



But please let me know if there is any issue with Syncfusion grid as it is not supporting built in Angular Email Validator.


BS Balaji Sekar Syncfusion Team January 3, 2020 09:11 AM UTC

Hi Pavani, 
We have confirmed the reported issue, “Validation returns false when the length of character exceeds 5 after dot in email validation” as a bug in our end. And this fix will be included in our patch release scheduled on 14th January 2020. We appreciate your patience until then.   
You can track the status of the reported issue from the below feedback link,  
Let us know if you have any concerns. 
Balaji Sekar. 

PK Pavani Kothapalli January 3, 2020 05:49 PM UTC


Thank you for the link to track the status.

Please let me know in patch release if syncfusion grid will support built in Angular Email Validator as well?

Currently built-in Angular Email Validator is not working for a template-driven form that use Syncfusion grid.



PK Pavani Kothapalli January 3, 2020 10:38 PM UTC


Please see additional information: 

We are not using Syncfusion email validator and we are using built in Angular email validator that is in Syncfusion grid templates.

It works if we use built-in Angular Email validator outside the Syncfusion grid.

1. Added built in Angular Email validator in Syncfusion grid template - Not working

2.  Added built-in Angular email validator outside Syncfusion grid.  - Working


BS Balaji Sekar Syncfusion Team January 8, 2020 12:35 PM UTC

Hi Pavani, 
While checking our Syncfusion Form Email Validator with the Angular email validator we were able to identify the issue – “Special characters entered before the @ symbol not accepted as valid email”. So we will fix both these issues and include the solution in the patch release scheduled on 22nd January 2020. 
We appreciate your patience until then. 
You can use the same feedback link provided in the previous update for tracking both these issues. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon