如何使用 Angular 5 验证电子邮件

Question

我想知道如何用.com验证我的电子邮件 我什么都试过了，但我做不到，你能帮我吗？ 我正在总结我已经开发的代码，我对这个角度很陌生，我发现在这个问题上很困难。 如果用户键入.com，我希望验证电子邮件，但直到现在我只得到了基本的验证，示例：示例@示例。 我希望它是 [e-mail]

谢谢

.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>

Answer 1

试试这个，我们可以有正则表达式模式来验证

<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>

Answer 2

您需要更改模式，请使用波纹管模式作为电子邮件 ID。

有效电子邮件 ID 示例：

[e-mail] - 有效， [e-mail] - 有效， sample@sam - 因维利亚德。

pattern="^w+([.-]?w+)*@w+([.-]?w+)*(.w{2,3})+$"

Answer 3

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".

Answer 4

尝试正则表达式

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,}))$/)])),

Answer 5

试试这个简单的正则表达式，

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 };
}

查看此堆栈闪电战示例演示

Answer 6

更喜欢Angular提供的电子邮件验证器。

<input type="email" name="email" ngModel email>
<input type="email" name="email" ngModel email="true">
<input type="email" name="email" ngModel [email]="true">

参考：

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