Angular Email Validator

[Pavani Kothapalli]

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 "[e-mail]oooooooooooooooooooooooooooooooooooooom"

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]

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, 

Sample: https://stackblitz.com/edit/angular-d43ygk-thvrra?file=app.component.ts 

 

Regards, 

Thavasianand S. 

[Pavani Kothapalli]

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]

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 14^th January 2020. We appreciate your patience until then.   

  

You can track the status of the reported issue from the below feedback link,  

  

Feedback Link: https://www.syncfusion.com/feedback/11069/validation-returns-false-when-the-length-of-charecter-exceed-5-after-dot-in-email 

 

Let us know if you have any concerns. 

 

Regards, 

Balaji Sekar. 

[Pavani Kothapalli]

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]

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

https://stackblitz.com/edit/angular-u6fjnv-jnjysn?file=app.component.html

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

https://stackblitz.com/edit/angular-bkzhzg?file=src/app/hero-form/hero-form.component.html

Thanks,

Pavani

[Balaji Sekar]

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 22^nd 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.