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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Angular Email Validator

Thread ID:

Created:

Updated:

Platform:

Replies:

150308 Dec 31,2019 07:51 PM UTC Jan 8,2020 12:35 PM UTC Angular - EJ 2 6
loading
Tags: Grid
Pavani Kothapalli
Asked On December 31, 2019 07:51 PM UTC

Hi,

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.

https://angular.io/api/forms/EmailValidator

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-columns>
                                     <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" />
                                         ng-template>
                                     e-column>
                                     <e-column field="processType" [visible]='false' defaultValue="{{data.header}}">e-column>
                                 e-columns>
                             ejs-grid>

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.
Thanks,
Pavani

Thavasianand Sankaranarayanan [Syncfusion]
Replied On 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, 

 
Regards, 
Thavasianand S. 


Pavani Kothapalli
Replied On January 3, 2020 12:33 AM UTC

Hi,

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. 

const EMAIL_REGEXP =
    /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;

https://github.com/angular/angular/blob/master/packages/forms/src/validators.ts

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

Thanks,
Pavani

Balaji Sekar [Syncfusion]
Replied On 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. 
 
Regards, 
Balaji Sekar. 


Pavani Kothapalli
Replied On January 3, 2020 05:49 PM UTC

Hi,

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.

https://angular.io/api/forms/EmailValidator

Thanks,
Pavani

Pavani Kothapalli
Replied On January 3, 2020 10:38 PM UTC

Hi,

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




Thanks,
Pavani


Balaji Sekar [Syncfusion]
Replied On 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. 
 
Regards, 
Balaji Sekar. 


CONFIRMATION

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