I would like to know how to validate my email with .com I tried everything, but I could not, could you help me? I'm wrapping up the code I've already developed, I'm new to the angle and I'm finding it difficult on this subject. I would like the email to be validated if the user types the .com but until now I only got the basic validation, Example: example @ example. And I'd like it to be example@example.com
Thank you
.ts
import { ActivatedRoute, Params, Router } from "@angular/router";
import { Component, OnInit, Inject, } from '@angular/core';
import { FormControl, Validators, FormGroup, FormBuilder } from '@angular/forms';
import { Observable, Subscription } from "rxjs";
import { ModelDataForm } from "./modelDataForm";
import { DOCUMENT } from "@angular/platform-browser";
import 'rxjs/add/operator/filter'
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
userService: any;
isTCAccepted: any;
private subscription: Subscription;
uri: string;
ssid: string;
sessiondId: string;
ip: string;
mac: string;
ufi: string;
mgmtBaseUrl: string;
clientRedirectUrl: string;
req: string;
userName: string;
hmac: string;
name: string;
email: string;
//checkbox
isValidFormSubmitted: boolean = null;
constructor(@Inject(DOCUMENT) private document: any, private route: ActivatedRoute) {
}
//checkbox
onFormSubmit() {
this.isValidFormSubmitted = false;
if (this.userForm.invalid) {
return;
}
this.isValidFormSubmitted = true;
this.isTCAccepted = this.userForm.get('tc').value;
}
ngOnInit() {
this.route.queryParams
.filter(params => params.mac)
.subscribe(params => {
console.log(params);
this.ssid = params.ssid;
this.sessiondId = params.sessionId;
this.ip = params.ip;
this.mac = params.mac;
this.ufi = params.ufi;
this.mgmtBaseUrl = params.mgmtBaseUrl;
this.clientRedirectUrl = params.clientRedirectUrl;
this.req = params.req;
this.hmac = params.hmac;
});
}
emailFormControl = new FormControl('', [
Validators.required,
Validators.pattern('[a-zA-Z0-9.-_]{1,}@[a-zA-Z.-]{2,}[.]{1}[a-zA-Z]{2,}'),
Validators.email,
]);
nameFormControl = new FormControl('', [
Validators.required,
]);
userForm = new FormGroup({
tc: new FormControl('', [(control) => {
return !control.value ? { 'required': true } : null;
}])
});
}
html
<mat-form-field class="hcs-full-width">
<input matInput placeholder="Nome" [formControl]="nameFormControl" [(ngModel)]="name">
<mat-error *ngIf="nameFormControl.hasError('required')">
Nome é
<strong>requirido</strong>
</mat-error>
</mat-form-field>
<mat-form-field class="hcs-full-width">
<input matInput placeholder="E-mail" [formControl]="emailFormControl" [(ngModel)]="email" >
<mat-error *ngIf="emailFormControl.hasError('email') && !emailFormControl.hasError('required') && !emailFormControl.hasError('pattern')">
Por favor entre com um endereço de e-mail valido
</mat-error>
<mat-error *ngIf="emailFormControl.hasError('required')">
E-mail é
<strong>requirido</strong>
</mat-error>
</mat-form-field>
<br>
<div class="checkbox">
<mat-checkbox class="hcs-full-width" formControlName="tc">
</mat-checkbox>
Aceito os termos e condições de uso
<a data-toggle="collapse" href="#collapseExample">
ver os termos
</a>
</div>
<mat-error *ngIf="userForm.get('tc').invalid && isValidFormSubmitted != null && !isValidFormSubmitted" [ngClass]="'error'">
É necessário aceitar os termos de uso
</mat-error>
<br>
<button mat-button type="submit" class="btn btn-primary btn-lg btn-block button-size" (click)="Logar()">Enviar</button>
<div class="space"></div>
Try this out, we can have regex pattern to validate
<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>
You need to change your patterns, Kindly use the bellow pattern for email id.
Example valid email ID's:
sample@sam.com - Valid, sample@sam.in - Valid, sample@sam - Invliad.
pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$"
试试正则表达式
emailFormControl: new FormControl('', Validators.compose([Validators.required, Validators.pattern(/^(([^<>()\[\]\\.,;:\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,}))$/)])),
Either you can user HTML5 type attribute as email like type="email"
<div class="form-group">
<input class="form-control text-sm-x2 pl-5" placeholder="Email Id" type="email" name="email" [(ngModel)]="userCredentials.email"
[disabled]="disableInputs" required email #email="ngModel">
<span class="help-block" *ngIf="email?.dirty && email?.errors?.email" style="color:red">
<small>Enter a valid email</small>
</span>
</div>
OR
use pattern attribute like:
pattern="^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" with default type="text".
Try this simple regex ,
if (emailString.match(/[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[A-Za-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?\.)+[a-z0-9A-Z](?:[a-z0-9A-Z]*[a-z0-9A-Z])?/)) {
return null;
} else {
return { 'invalidEmailAddress': true };
}
Check this Stackblitz sample demo
Prefer the Email Validator provided by Angular.
<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">
Reference:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.