Clash Royale CLAN TAG#URR8PPP

Angular 4 reactive form Email validation by regular expression fail

I'm using a reactive form to get user input. Not satisfied with the EmailValidator I'm using a pattern.

EmailValidator

emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]2,4$';
this.email = new FormControl('', [Validators.required, Validators.pattern(emailRegEx)]);


And the HTML:

<input type="email" formControlName="email" [ngClass]="contactForm.get('email').errors && (contactForm.get('email').dirty || isButtonClicked) ? 'contact-input input-error' : 'contact-input'">


But here's the thing, for some reason the regex is accepting 4 chars after the @, without a period.
name@d --> error
name@doma --> no error
name@domain. --> error
name@domain.com --> no error

@

name@d

name@doma

name@domain.

name@domain.com

I checked this regex in multiple online regex testers, and they all only accept the last example above, none of them accept the second one.

EDIT:

The regular expression is fine and works well, the problem is that somehow the pattern validator isn't parsing the regex correctly, or something.

3 Answers
3

The pattern is not correct as a string. In deed you are inside a string so to escape '.' you need to use double backslash like:

emailRegEx = '^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]2,4$'


Or if you want to avoid doing so i suggest to use:

emailRegEx = /^[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]2,4$/


You can use CustomValidator package that offers too much types of validation :https://www.npmjs.com/package/ng2-validation

import it like that :

import CustomValidators from 'ng2-validation';


and use it in your form control :

this.email = new FormControl('', [Validators.required, CustomValidators.email]);


Regards,

EmailValidator

input type="email"

import Component from '@angular/core';
import FormBuilder, FormGroup, Validators from '@angular/forms';

@Component(
templateUrl: './forgot-password.component.html',
styleUrls: ['./forgot-password.component.scss']
)
export class ForgotPasswordComponent

psResetForm: FormGroup;

constructor(private fb: FormBuilder)
this.psResetForm = fb.group(
'email': [null, Validators.compose([Validators.required, Validators.email])]
);


makeRequestToResetLink(formData, valid: boolean)
if (valid)
alert(formData.email);






Your Template should look like this

<form [formGroup]="psResetForm" (ngSubmit)="makeRequestToResetLink(psResetForm.value,psResetForm.valid)">
<input type="email" formControlName="email"/>
<button type="submit">
submit
</button>
</form>


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.