I am new in learning Angular2, and I want to make a validation form that verifies emails after a RegEx pattern.
My code looks something like this but I don't have any idea if I am doing it right, or what I did wrong, can somebody please help me a bit?
Angular 4 has a built-in "email" validation tag that can be added within the input. E.g.:
<input type="email" id="contactemail" email>
This will be valid for a series of numbers and letters then an @ then another series of letters. It will not account for the dot after the @ -- for that you can use the "pattern" tag within the input and your standard regex.
<input type="text" class="form-control" #userEmail="ngModel" name="email" [(ngModel)]="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" [ngClass]="{invalid : userEmail.touched && !userEmail?.valid}" required email>
*ngIf condition for showing error message??Try Something like that
<div class="alert-email">
<label>Email</label>
<input
id="contactemail"
type="text"
#contactemail="ngModel"
[(ngModel)]="model.contactemail"
required
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
<div class="md-errors-spacer" [hidden]="contactemail.valid || contactemail.untouched">
<div *ngIf="contactemail.errors && contactemail.errors.required">
Email is required
</div>
<div *ngIf="contactemail.errors && contactemail.errors.pattern">
Email is invalid
</div>
</div>
</div>
Angular 4 Email Validation :
Final :
`<input type="email" [(ngModel)]="enterEmail" name="myEmail" #myEmail="ngModel" email pattern="[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}" required>`
[a-zA-Z0-9.**-**_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}. The minus char must be escaped. I prefer ^[a-zA-Z]{1}[a-zA-Z0-9.\-_]*@[a-zA-Z]{1}[a-zA-Z.-]*[a-zA-Z]{1}[.][a-zA-Z]{2,}${1} was written by someone who is only just beginning to learn about regular expressions.You can use this pattern for your email inputs:
^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$
This pattern accepts "sample@domain" also in addition of "[email protected]". Using this email pattern "sample@domain." is not acceptable and 1 letter domain tld is not allowed ("[email protected]" goes wrong).
For multiple email validation in a single field, you can do using the custom email validator.
import { FormControl } from '@angular/forms';
export class EmailValidator {
public static isValid(email) {
var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(String(email).toLowerCase());
}
static isMultiValid(control: FormControl): any {
console.log(control.value);
let tempEmail = control.value;
let invalid = false;
let regex =/[a-z0-9!#$%&'*+=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?/g;
if(tempEmail.indexOf(',') > -1){
var emails = control.value.split(',');
for (let email of emails) {
console.log(email);
let isValid = EmailValidator.isValid(email)
if(!isValid){
return{"email not valid":isValid}
}
}
return null;
}
else{
let email = control.value.split(',');
if( email == "" || ! regex.test(email)){
invalid = true;
return {
"email not valid": invalid
};
}
console.log("valid");
return null;
}
}
}
.
Try this:
^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$
This pattern worked for me which will accept alphanumeric characters and '.' special character.
^[\\w]+(?:\\.[\\w])*@(?:[a-zA-Z0-9-]+\\.)+[a-zA-Z]{2,6}$
this pattern email working :
<input pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
Solution originally posted by the OP as part of the question:
<div class="alert-email">
<label for="contactemail">EMAIL: </label>
<input type="email" id="contactemail" name="contactemail"
required ng-pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/"
[(ngModel)]="model.contactemail" #contactemail="ngModel"
placeholder="Your email" /><br><br>
<div *ngIf="contactemail.errors && (contactemail.dirty || contactemail.touched)" class="alert-email alert-danger-email"><br>
<div [hidden]="!contactname.errors.required">
Email is required
</div>
<div [hidden]="!contactname.errors">
Please input a valid email.
</div>
</div>
</div>
This pattern worked for me :
pattern="[a-zA-Z0-9.-]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{3,}"
Try This One it will work:
^[a-zA-Z]+([.-]?[a-zA-Z0-9]+)*@([a-zA-Z]+([.-]?[a-zA-Z]))[.]{1}[a-zA-Z]{2,}$
/